Question

尝试隐藏视频容器中的cusor以及一些控件。我有一个小的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);
});

Answer 1

正如@timgoodman解释的那样，应用与之前的SO帖子相同的缓冲区标志。我的答案的不同之处在于css和mouse事件的范围。我也在使用类进行css更改和组合变量，因为我是一个boyscout。

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

CSS隐藏游标而不触发JavaScript mousemove事件

1 个答案: