Mouseclick + mousemove/console.log當鼠標懸停在div上時響應200次

當你點擊稱爲選擇器的總div並將鼠標拖動到方塊上時，我得到了一些方塊，你盤旋的方塊會得到你選擇的顏色選色器。Mouseclick + mousemove/console.log當鼠標懸停在div上時響應200次

現在，當你選擇一種顏色，然後點擊1個方塊並拖動鼠標。您將在console.log中看到您懸停的每個div響應200次。這使得你的網站非常滯後。

我怎麼能讓它像每次我懸停1的div它只回應1次。

的jsfiddle：
http://jsfiddle.net/DennisBetman/4o9t42b8/

步驟：
打開控制檯。選擇一種顏色。然後點擊並拖動鼠標。

HTML：

Pick color: 
<input class="getColor" type="color" name="favcolor"> 
<div class="selector"> 
    <div class="one1"></div> 
    <div class="one2"></div> 
    <div class="one3"></div> 
    <div class="one4"></div> 
    <div class="one5"></div> 
    <div class="one6"></div> 
    <div class="one7"></div> 
    <div class="one8"></div> 
    <div class="one9"></div> 
    <div class="one10"></div> 
    <div class="one11"></div> 
    <div class="one12"></div> 
    <div class="one13"></div> 
    <div class="one14"></div> 
    <div class="one15"></div> 
    <div class="one16"></div> 
    <div class="one17"></div> 
    <div class="one18"></div> 
    <div class="one19"></div> 
    <div class="one20"></div> 
    <div class="one21"></div> 
    <div class="one22"></div> 
    <div class="one23"></div> 
    <div class="one24"></div> 
    <div class="one25"></div> 
    <div class="one26"></div> 
    <div class="one27"></div> 
    <div class="one28"></div> 
    <div class="one29"></div> 
    <div class="one30"></div> 
    <div class="one31"></div> 
    <div class="one32"></div> 
    <div class="one33"></div> 
    <div class="one34"></div> 
    <div class="one35"></div> 
    <div class="one36"></div> 
    <div class="one37"></div> 
    <div class="one38"></div> 
    <div class="one39"></div> 
    <div class="one40"></div> 
</div> 
<div class="rotation"> 
    <div class="order one1"></div> 
    <div class="order one2"></div> 
    <div class="order one3"></div> 
    <div class="order one4"></div> 
    <div class="order one5"></div> 
    <div class="order one6"></div> 
    <div class="order one7"></div> 
    <div class="order one8"></div> 
    <div class="order one9"></div> 
    <div class="order one10"></div> 
    <div class="order one11"></div> 
    <div class="order one12"></div> 
    <div class="order one13"></div> 
    <div class="order one14"></div> 
    <div class="order one15"></div> 
    <div class="order one16"></div> 
    <div class="order one17"></div> 
    <div class="order one18"></div> 
    <div class="order one19"></div> 
    <div class="order one20"></div> 
    <div class="order one21"></div> 
    <div class="order one22"></div> 
    <div class="order one23"></div> 
    <div class="order one24"></div> 
    <div class="order one25"></div> 
    <div class="order one26"></div> 
    <div class="order one27"></div> 
    <div class="order one28"></div> 
    <div class="order one29"></div> 
    <div class="order one30"></div> 
    <div class="order one31"></div> 
    <div class="order one32"></div> 
    <div class="order one33"></div> 
    <div class="order one34"></div> 
    <div class="order one35"></div> 
    <div class="order one36"></div> 
    <div class="order one37"></div> 
    <div class="order one38"></div> 
    <div class="order one39"></div> 
    <div class="order one40"></div> 
</div> 
<div class="empty"></div>

的jQuery：

var clicking = false; 
$(".getColor").change(function() { 
    var getColor = $(".getColor").val(); 
    var color = getColor; 
    $('.selector').mousedown(function() { 
     clicking = true; 
     $('.clickstatus').text('mousedown'); 
     $(".selector > div").click(function() { 
      var myClass = $(this).attr("class"); 
      $(".empty").text(myClass); 
      var getVal = $(".empty").text(); 
      $("." + getVal + "").css("background", color); 
      console.log(getVal); 
     }); 
    }); 

    $('.selector').mouseup(function() { 
     clicking = false; 
    }); 
    $('.selector').mousemove(function() { 
     if (clicking) { 
      $(".selector > div").hover(function() { 
       if (clicking) { 
        var myClass = $(this).attr("class"); 
        $(".empty").text(myClass); 
        var getVal = $(".empty").text(); 
        $("." + getVal + "").css("background", color); 
        console.log(getVal); 
       } 
      }); 
     } 
    }); 
    $(".selector").mouseleave(function() { 
     clicking = false; 
    }); 
});

CSS：

.selector { 
    width: 400px; 
    background: #d3d3d3; 
    cursor:crosshair; 
    margin-bottom: 250px; 
    -webkit-touch-callout: none; 
    -webkit-user-select: none; 
    -ms-user-select: none; 
    user-select: none; 
} 
.rotation { 
    width: 400px; 
    height: 100px; 
    background-color: white; 
} 
.selector > div { 
    width:40px; 
    height:40px; 
    border:1px solid #d3d3d3; 
    background:white; 
    float:left; 
    box-sizing:border-box; 
} 
.order { 
    background:yellow; 
    float:left; 
    width:40px; 
    height: 40px; 
} 
.empty { 
    display:none; 
}

來源

2015-02-06 Dennis Betman

我在手機上，所以我不能測試它，但你可能正在尋找一個像debod和下劃線那樣的debounce函數。 – 2015-02-06 18:18:31

每次你選擇另一種顏色，你添加一個新的事件監聽器而不刪除舊的監聽器，並且每次你將鼠標移動到div上時，你都會將其他事件監聽器添加到cpature懸停中（並且請注意，自從添加了其他事件監聽器後，移動鼠標時mousemove會被觸發很多）。 – 2015-02-06 18:22:25

因爲你綁定其他事件裏面的一些事件（如內部mousedo wn）你保持綁定div點擊事件。

$(".selector > div").click(function() {}

和內移動鼠標也每次綁定懸停事件鼠標移動

$(".selector > div").hover(function() {

你綁定所有的，從顏色選擇器中的「變」事件中;

你不需要這樣做只是設置標誌來跟蹤你在什麼狀態/什麼是重要的，只設置事件處理程序一次。

var color, clicking = false; 
$(".getColor").change(function() { 
    color = $(".getColor").val(); 
}): 

$('.selector').mousedown(function() { 
    clicking = true; 
    $('.clickstatus').text('mousedown'); 
}); 
$('.selector').mouseup(function() { 
    clicking = false; 
}); 
$(".selector").mouseleave(function() { 
    clicking = false; 
}); 

$(".selector > div").click(function() { 
    var myClass = $(this).attr("class"); 
    $(".empty").text(myClass); 
    var getVal = $(".empty").text(); 
    $("." + getVal + "").css("background", color); 
    console.log(getVal); 
}); 

$(".selector > div").hover(function() { 
    if (clicking) { 
    var myClass = $(this).attr("class"); 
    $(".empty").text(myClass); 
    var getVal = $(".empty").text(); 
    $("." + getVal + "").css("background", color); 
    console.log(getVal); 
    } 
});

來源

2015-02-06 18:26:20

根據我的意見，我認爲你應該重拍你的JS：

var clicking = false; 
var color = "black"; 
$('.selector').mousedown(function() { 
    clicking = true; 
}); 
$('.selector').mouseup(function() { 
    clicking = false; 
}); 
$(".selector > div").click(function() { 
    $("."+this.className).css("background", color); 
    console.log(this.className); 
}); 
$(".selector").mouseleave(function() { 
    clicking = false; 
}); 
$(".getColor").change(function() { 
    color = $(".getColor").val(); 
}); 
$(".selector > div").on("mouseover", function() { 
    if (clicking) { 
     $("."+this.className).css("background", color); 
     console.log(this.className); 
    } 
});

jsfiddle

更何況，我真的不知道你爲什麼這樣做：

var myClass = $(this).attr("class"); 
$(".empty").text(myClass); 
var getVal = $(".empty").text(); 
$("." + getVal + "").css("background", color); 
console.log(getVal);

這意味着：通過jquery找到這個，所以我們可以得到屬性類，找到另一個元素我們可以存儲這個值，讓我們通過再次找到該元素再次獲得該值，並最終通過classname找到我們現在（也有），而className完全可以從this.className

來源

2015-02-06 18:36:28

Mouseclick + mousemove/console.log當鼠標懸停在div上時響應200次

回答

相關問題