23

完成后如何使用 eventListener 进行检测mousemove？

document.AddEventListener('mousemove', startInteractionTimer, false);

function startInteractionTimer(){
  clearInterval(touchInterval);
  touchInterval = setInterval(noAction, 6000);
}

我想startInteractionTimer在 mousemove 结束后立即启动该功能，我想抓住它。在上面的代码示例中，如果鼠标移动，它就会启动。

谢谢

编辑：好的，我回答了我自己的问题，上面的脚本--^ 很好。

4

3 回答 3

17

你总是可以为它制作一个自定义事件：

(function ($) {
    var timeout;
    $(document).on('mousemove', function (event) {
        if (timeout !== undefined) {
            window.clearTimeout(timeout);
        }
        timeout = window.setTimeout(function () {
            // trigger the new event on event.target, so that it can bubble appropriately
            $(event.target).trigger('mousemoveend');
        }, 100);
    });
}(jQuery));

现在你可以这样做：

$('#my-el').on('mousemoveend', function () {
    ...
});

编辑：

此外，为了与其他 jQuery 事件保持一致：

(function ($) {
    $.fn.mousemoveend = function (cb) {
        return this.on('mousemoveend', cb);
    });
}(jQuery));

现在你可以：

$('#my-el').mousemoveend(fn);
于 2013-02-25T13:18:24.253 回答
11

您可以尝试仅设置/清除超时以检测移动鼠标的结束...

var x;
document.addEventListener('mousemove', function() { 
    if (x) clearTimeout(x); 
    x = setTimeout(startInteractionTimer, 200); 
}, false);

你想等多久取决于你。我不知道你想说多久是“鼠标移动的结束”

示例：http: //jsfiddle.net/jeffshaver/ZjHD6/

于 2013-02-25T12:31:06.103 回答
8

这是另一个自定义事件解决方案，但没有 jQuery。它创建一个名为的事件，该事件mousestop将在鼠标指针所在的元素上触发。它会像其他鼠标事件一样冒泡。

因此，一旦包含了那段代码，就可以将事件侦听器添加到任何元素addEventListener('mousestop', fn)：

(function (mouseStopDelay) {
    var timeout;
    document.addEventListener('mousemove', function (e) {
        clearTimeout(timeout);
        timeout = setTimeout(function () {
            var event = new CustomEvent("mousestop", {
                detail: {
                    clientX: e.clientX,
                    clientY: e.clientY
                },
                bubbles: true,
                cancelable: true
            });
            e.target.dispatchEvent(event);
        }, mouseStopDelay);
    });
}(1000));

// Example use
document.getElementById('link').addEventListener('mousestop', function(e) {
    console.log('You stopped your mouse while on the link');
    console.log('Mouse coordinates are: ', e.detail.clientX, e.detail.clientY);
    // The event will bubble up to parent elements.
});
<h1>Title</h1>
<div>
    content content<br>
    <a id="link" href="#">stop your mouse over this link for 1 second</a><br>
    content content content
</div>

于 2016-09-28T20:02:28.340 回答