javascript - 单击按钮时如何停止运行其他功能？

Question

我想挑战自己并制作了一个 Etch a Sketch，基本上，当我将鼠标悬停在 div 上时，我创建了它们的颜色变化，我制作了一个按钮，因此当我单击它并将鼠标悬停在 div 上时，颜色会有所不同(随机 rgb ) 来自其他 div(每个 div 不同的颜色)，我制作了另一个按钮以留下我悬停的过去 div 和一个按钮所以当我悬停在 div 上时它们都具有相同的颜色。我希望其他函数在我单击按钮时停止，例如当我单击“随机颜色”按钮并调用 randomColor 函数时我希望 trialColor 和 normalColor 函数停止。

Jsfiddle代码 https://jsfiddle.net/6m6vuqm1/

<div class="header">
<button class="buttons" id="color-button" value="Default">Default</button>
<button class="buttons" id="random-color" value="Random Color">Random Color</button>
<button class="buttons" id="trail-color" value="Trail Color">Trail Color</button>
</div>

Javascript

    $(document).ready(function(){
var userAnswer = parseInt(prompt("Enter an number between 1 and 60"));
var squares = "<div class='square'></div>";
    var squareCount = userAnswer * userAnswer;
    var dimensions = 960 / userAnswer;
    for(var i = 0; i < squareCount; i++ ){
        $(".the-grid").append(squares);
    }
        $(".square").width(dimensions);
        $(".square").height(dimensions);

// Create normal color
function normalColor(){
    $(".square").hover(function(){
        $(this).css("background-color","#513684");
    });
}

// Create trail color
function trailColor(){
    $(".square").hover(function(){
        $(this).css({
            "background-color":"#000",
            "opacity":"1"
        });
    }, function(){
        $(this).fadeTo(10000,0);
    });
}

// Create Random Color
function randomColor(){
    $(".square").mouseenter(function(){
        var hex = [1,2,3,4,5,6,7,8,9,"A","B","C","D","E","F"];
        var hexColor = "#";
        for(var i = 0; i < 6; i++){
            var randomHex = Math.floor(Math.random() * 15);
            hexColor += hex[randomHex];
        }
        $(this).css("background-color",hexColor);
    });
}
//Clear grid
function clearGrid(){
    $("#clear-button").click(function(){
        $(".square").css("background-color","transparent");
    }); 
}
    // Events

$("#random-color").on("click",function(){
    $(".header").off("click","#color-button",normalColor);
    $(".header").off("click","#trail-color",trailColor);
    randomColor();
});

$("#color-button").on("click",function(){
    $(".header").off("click","#random-color",randomColor);
    $(".header").off("click","#trail-color",trailColor);
    normalColor();
});

$("#trail-color").on("click",function(){
    $(".header").off("click","#random-color",randomColor);
    $(".header").off("click","#color-button",normalColor);
    trailColor();
});

$("#clear-button").on("click",clearGrid);


});

Answer 1

您在 .square 元素中附加了事件。要使用 off() 或 unbind() 停止事件，您必须将它们附加到具有事件触发器的元素中:

$('.element').on('click', function() {});
$('#other-element').off('click'); // this not dettach the above event.

要正确分离:

$('.element').on('click', function() {});
$('.element').off('click');

你也可以使用解除绑定(bind)

$('.element').unbind('click');