CSS隐藏光标而不触发JavaScript鼠标移动事件

Question

试图将客户端连同一些控件隐藏在视频容器中。我有一个小的JavaScript函数，将一个类添加到mousemove上的容器中以显示控件，并且我为cursor: none;循环了一些css。它成功地隐藏了光标，但显然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);
  });