单击按钮时如何停止其他功能的运行？答案

【问题标题】：How to stop other functions from running when a button is clicked?单击按钮时如何停止其他功能的运行？
【发布时间】：2015-06-30 15:32:32
【问题描述】：

我想挑战自己并制作了 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);


});

【问题讨论】：

您似乎只是删除了其他按钮的事件处理程序，并没有真正停止其他功能。你能把其他功能的代码包括进来吗？
全局变量和基本 if 语句呢？我不知道还有什么其他方法可以停止功能。除非你解开他们的触发器，但我猜你不想那样做。
当我单击一个按钮时，该功能会启动，但是当我单击另一个按钮并调用另一个功能时，过去按钮的功能不会停止。我对其进行了编辑并将所有的javascript代码放入其中。
我同意。一个简单的条件语句可以工作，可能嵌套在setInterval 函数中，以定期检查条件是否仍然是true。如果您已经拥有所有代码，最好将其发布到jsfiddle，以便我们进行编辑。
我在我的项目中添加了一个 jsfiddle 链接。

标签： javascript jquery html css

【解决方案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');

你也可以使用 unbind

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

【讨论】：

你在做什么？这解决了问题。试试这个确切的代码： $('.square').unbind();然后尝试一下。事件必须立即分离。

【解决方案2】：

不是将函数直接传递给悬停，而是传递一个指向函数的指针。然后根据需要更改底层函数。

// This is just sample code

function normalColorLogic(){
    $(this).css("background-color","#513684");
}

function normalColor(){
    $(".square").hover(function(){ normalColorLogic(); });
}

function randomColor() {
    // random color logic
    // …

    // Now, let's turn off normalColor
    normalColorLogic = function(){}; 
}

// When you want to turn normalColor back on
normalColorLogic = function(){ $(this).css("background-color","#513684"); };

【讨论】：