如何“停止”或切换此 .mouseenter 功能？答案

【问题标题】：How can I "stop" or toggle this .mouseenter function?如何“停止”或切换此 .mouseenter 功能？
【发布时间】：2017-03-03 08:26:13
【问题描述】：

我的代码很简单：

var draw = false;

如果单击鼠标，它会将“绘制”从 false 切换为 true。

如果 'draw' 为真，它会启用一个 mouseenter() 事件，当鼠标进入 div 时，该事件会为某些（标记为“像素”）的背景着色。这很好用，但是当我再次单击鼠标并将“draw”设置为 false 时，mouseenter 事件不会关闭。我可以设置一个“else”语句，将背景再次涂成白色，但这不是主意，更像是一个创可贴......

这一切都在一个函数中处理。

var draw = false;
var drawStart = function(){
    draw=!draw;
    if (draw === true)
    {
         $('.pixel').mouseenter(function() {
               $(this).css('background-color', 'black');
         });
    }
    else
     {

          //don't do anything
     }

});

我还尝试在绘制像素类后将其换成其他东西，但我仍然遇到类似的问题，无论绘制是真还是假，mouseenter 事件仍会触发类更改。

我也尝试了一个 while 循环而不是 if/else，但这会使浏览器崩溃...

我是在手机上写的，如果上述代码中有任何拼写错误，它们可能不会出现在我的实际代码中。

【问题讨论】：

标签： jquery

【解决方案1】：

我建议换个角度思考这个问题。首先，创建一个封装您的样式的 CSS 类。

.draw { background-color: black; }

然后，不要添加和删除事件处理程序，而是始终绑定事件处理程序，如果不需要它就让它什么都不做。

var draw = false;
var drawStart = function(){
    draw = !draw;
};
$('.pixel').on('mouseenter', function () {
    if (draw) {
        $(this).addClass('draw');
    }
});

这样可以更轻松地查看正在发生的事情，并将样式从 JavaScript 移到它所属的 CSS 中。

请注意，此代码仅添加 draw 类，而不会删除它。如果您希望它在鼠标输入时打开/关闭，请使用toggleClass 而不是addClass。

【讨论】：

【解决方案2】：

你需要解绑（关闭）事件，试试：

var draw = false;
var drawStart = function(){
    draw=!draw;
    if (draw === true)
    {
         $('.pixel').mouseenter(function() {
               $(this).css('background-color', 'black');
         });
    }
    else
     {
          // deprecated 
          // $('.pixel').unbind('mouseenter');
          $('.pixel').off('mouseenter');
     }

});

如 cmets 中所述，您应该改用 off。

【讨论】：

【解决方案3】：

    else
    {   
        $('.pixel').off('mouseenter');
    }

这可以解决问题。谢谢！我也会记住其他解决方案以供将来参考。

【讨论】：