javascript - CSS 隐藏光标而不触发 JavaScript mousemove 事件

Question

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

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

• jsFiddle 示例

• 另外值得一提的是，我已经看过其他 SO 帖子，但不明白他们是如何避免该事件的，尽管它确实有效。

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

Answer 1

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

• jsFiddle 示例

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