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

How to stop other functions from running when a button is clicked?

本文关键字：功能 运行 其他 何停止 按钮 单击      更新时间：2023-09-26

我想挑战自己，做了一个蚀刻草图，基本上当我悬停在div上时，我创建了它们的颜色变化，我做了一一个按钮，所以当我点击它并悬停在div上方时，颜色将与其他div不同（随机rgb）（每个div的颜色不同），我做了另一个按钮，为我悬停的过去的div留下痕迹，还有一个按钮当我悬停在div上时，它们都有相同的颜色。当我点击一个按钮时，我希望其他函数停止，例如当我点击随机颜色按钮并调用randomColor函数时，我想要trialColor和normalColor函数停止。

Jsfddle代码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);

});

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

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

正确分离：

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

你也可以使用解除绑定

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

与其直接将函数传递给悬停，不如传递一个指向函数的指针。然后根据需要更改基础函数。

// 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"); };
相关文章：