Question

我的代码很简单：

var draw = false;

如果点击了鼠标，则会切换＆＃39;绘制＆＃39;从虚假到真实。

如果＆＃39;画＆＃39;是的，它允许mouseenter（）事件在鼠标进入div时为某些背景（标记为＆＃39;像素＆＃39;）着色。这工作正常，但是当我再次单击鼠标并“绘制”＃39;如果设置为false，则mouseenter事件不会关闭。我可以设置一个＆＃39; else＆＃39;声明再次为背景着色，但这不是主意，更像是一个绑带......

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

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事件仍会触发类更改，无论draw是true还是false。

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

我是在移动设备上写的，如果上面的代码中有任何拼写错误，他们可能不会出现在我的实际代码中。

Answer 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。

Answer 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');
     }

});

如评论中所述，您应该使用off。

Answer 3

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

这就是诀窍。谢谢！我会记住另一个解决方案以供将来参考。

我怎样才能停止＆＃34;或切换此.mouseenter功能？

3 个答案: