按钮的 JavaScript/jQuery .click() 问题答案

【问题标题】：JavaScript/jQuery .click() issue with buttons按钮的 JavaScript/jQuery .click() 问题
【发布时间】：2016-03-11 04:04:23
【问题描述】：

我正在 Odin Project 的 Web Development 101 课程中学习 JavaScript/jQuery 项目。我正在构建一个“蚀刻草图”应用程序，使用 div 作为网格上的正方形，当鼠标经过它们时会改变颜色。对于我的最后一个选择，我想留下一串褪色的方块。这在我按下按钮时有效。但是，当我选择不同的选项时，在选择“留下痕迹”选项后，褪色 div 的痕迹也会自动添加到其他选项中。我需要知道是否有办法在按下不同的按钮后结束该功能。另外，我是初学者，正在学习这种语言和框架。提前谢谢！

$(".trail").click(function() {
    $(".grid").mouseenter(function() {
        $(this).css("background-color", "black");
        $(this).fadeTo(0, 0);
        $(this).mouseleave(function() {
            $(this).fadeTo(600, 1);
        });
    });
});

【问题讨论】：

一旦单击另一个按钮，您应该从网格中删除处理程序，例如 $(".grid").off('mouseenter')

标签： javascript jquery button click fadeto

【解决方案1】：

单击另一个按钮后，您应该从网格元素中删除 mouseenter 处理程序，例如

$(".trail").click(function() {
    $(".grid").on('mouseenter.trail', function() {
        $(this).css("background-color", "black");
        $(this).fadeTo(0, 0);
        $(this).mouseleave(function() {
            $(this).fadeTo(600, 1);
        });
    });
});

然后在其他按钮单击中，您可以使用 .off() 删除此处理程序

$(".grid").off('mouseenter.trail')

命名空间用于事件注册和删除，因此我们不会错误地删除任何其他处理程序

【讨论】：

这完全有道理！非常感谢！