CSS 隐藏光标而不触发 JavaScript mousemove 事件答案

【问题标题】：CSS hide cursor without firing JavaScript mousemove eventCSS 隐藏光标而不触发 JavaScript mousemove 事件
【发布时间】：2013-06-03 16:11:28
【问题描述】：

试图将光标与一些控件一起隐藏在视频容器中。我有一个小的 JavaScript 函数，可以在 mousemove 上的容器中添加一个类以显示控件，我在 cursor: none; 的一些 css 中循环。它成功地隐藏了光标，但显然 css 更改也会触发 mousemove 事件，所以我有一个开始淡出和淡入的无限循环。

TLDR;如何防止 css 光标更改触发 mousemove 事件？

jsFiddle example
还值得一提，I've seen this other SO post，但不明白他们是如何避免这个事件的，尽管它确实有效。

JavaScript

$bod.on('mousemove', '.vidCont', function(){

    var thiis = $(this),
        time  = thiis.data('timer'),
        newTime;

    if (time){

        clearTimeout(time);
    }

    thiis.addClass('showControls');

    newTime = setTimeout(function(){

        thiis.removeClass('showControls');

    }, 2000);

    thiis.data('timer', newTime);
});

【问题讨论】：

我听说您不了解其他 SO 问题的解决方案。你为什么不直接使用它呢？
在另一个答案中，它会将标志 fadeInBuffer 设置为真，当您失败时。然后对 mousemove 的第一次调用将该标志设置为 false，然后对 mousemove 的任何后续调用都会淡入。现在这有意义吗？
也就是说，事件每次仍然被调用，只是跳过了设置标志时事件通常会做的工作。
@LeeMeador 太冗长了。
@TimGoodman 谢谢 - 将在下面发布我的工作答案

标签： javascript css event-handling preventdefault

【解决方案1】：

正如@timgoodman 解释的那样，这是应用与之前的 SO 帖子相同的缓冲区标志的问题。我的答案的不同之处在于 css 和鼠标事件的范围。因为我是一名童子军，所以我还使用类来更改我的 css 并组合变量。

jsFiddle example

$('body').on('mousemove', '.cont', function(){

    var thiis  = $(this),
        time   = thiis.data('timer'),
        buffer = thiis.data('buffer'),
        newTime;

    if (!buffer){

        if (time){

            clearTimeout(time);
        }

        thiis.addClass('showControls');

        newTime = setTimeout(function(){

            thiis.removeClass('showControls');

            thiis.data('buffer', true);
        }, 2000);
    } else {

        thiis.data('buffer', false);
    }

    thiis.data('timer', newTime);
});

【讨论】：