如何停止.mouseenter（）效果

Question

我正在創建一個與此類似的畫板。 我有以下功能來定義用戶將使用的繪圖類型：黑白，隨機顏色或灰色陰影。 用戶通過單擊不同的按鈕來決定使用哪種情況，每個按鈕都調用一個單獨的案例：

switch (colorMode){
    case 'bw':
        $(".grid").mouseenter(function(){ 
            $(this).css('background-color', "#EEEEEE");
        });
        break;
    case 'randomColor':
        $(".grid").mouseenter(function(){
            var randomColor = Math.floor(Math.random()*16777215).toString(16); //random number between 0 and 1, nultiplied by largest hexidecimal/color value, and the converted to a string.
            $(this).css('background-color', "#" + randomColor);
        });
        break;
    case 'fading':
        $(".grid").mouseenter(function(){
            var currentColor = $(this).css('background-color').slice(4, -1).split(', ');
            var newColor = [];
            for (i=0; i<currentColor.length; i++){
                newColor[i] = Math.round(parseInt(currentColor[i]) - (parseInt(currentColor[i])*.1));
            }
            var rgbString = "rgb(" + newColor[0] + "," + newColor[1] + "," + newColor[2] + ")"; 
            $(this).css('background-color', rgbString);
        });
        break;
}

我遇到的意外行為是，當用戶單擊按鈕以使用不同的情況時，它們不是替換先前的mouseenter效果，而是添加了mouseenter效果。 這意味着，如果用戶執行黑白，​​切換為顏色，然后返回黑白，則每個.grid將變為灰色，隨機顏色，然后返回灰色。 這是用戶看不到的，但並不理想。 特別是，因為它正在弄亂我的褪色效果。 有沒有辦法取代mouseenter效果？ 或殺死以前的？ 我只需要為我的代碼找到一個新結構嗎？

Answer 1

請嘗試在事件處理程序中進行switch ：

$(".grid").mouseenter(function(){
    switch(colorMode) {
         //...
    }
});

這樣，事件處理程序將只綁定一次。