Question

我正在制作一个滑块，我检测鼠标的位置以定义点击事件。我创建了一个$(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

当您执行鼠标移动时，它正在检查条件并附加单击事件。所以click事件多次附加。要避免这种情况，请先使用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');
    }
});

Answer 2

从mousemove处理程序中删除事件附件，如果光标位于正确的位置，则创建一个要检查的标志：

var widthScreen = $(window).width(),
    onArea = false;

$(document).on('mousemove', function(e) {
    if (e.pageX > (widthScreen - 120) && e.pageX < widthScreen) {
        $('ul').addClass('right-show');
        onArea = true;
    } else {
        $('ul').removeClass('right-show');
        onArea = false;
    }
});

$('li').eq(2).on('click', function(e) {
    if (onArea) {
        console.log('Not too much clicks.');
    }
});

A live demo at jsFiddle

Answer 3

看看underscore.js油门功能：

_.throttle(function, wait, [options])

创建并返回传递函数的新的受限制版本，当重复调用时，每隔等待毫秒最多只调用一次原始函数。对于速度限制事件非常有用，这些事件发生得比你能跟上

更快

Answer 4

使用.one（）代替.on（）Here

Mousemove和onclick事件

4 个答案: