javascript - 鼠标移动和 onclick 事件

Question

我正在制作一个 slider ，并检测鼠标的位置来定义单击事件。我创建一个 $(document).on('mousemove') 事件，当我位于想要点击的位置时，我添加一个 on('click')事件，但在本例中，该事件被调用了很多次，而不仅仅是一次。

让我们看看这段代码。这是一个简单的例子:jsFiddle

var widthScreen = $(window).width();

$(document).on('mousemove', function(e) {
    console.log(e.pageX);

    if (e.pageX > (widthScreen - 120) && e.pageX < widthScreen) {
        $('ul').addClass('right-show');

        $('li').eq(2).on('click', function() {
            console.log('too much click');
        });
    } else {
        $('ul').removeClass('right-show');
    }
});

如何解决这个问题？

Answer 1

当您执行鼠标移动时，它会检查条件并附加单击事件。所以点击事件被附加了很多次。为了避免这种情况，首先使用 off('click') 删除点击事件并附加它。这是更新后的fiddle .

var widthScreen = $(window).width();

$(document).on('mousemove', function(e) {
    console.log(e.pageX);

    if (e.pageX > (widthScreen - 120) && e.pageX < widthScreen) {
        $('ul').addClass('right-show');

        $('li').eq(2).off('click').on('click', function() {
            console.log('too much click');
        });
    } else {
        $('ul').removeClass('right-show');
    }
});