1

いくつかのコントロールと共に、ビデオ コンテナー内のカーソルを非表示にしようとしています。コントロールを表示するためにコンテナーにクラスを追加する小さな JavaScript 関数がありmousemove、いくつかの css for をループしました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);
});
4

1 に答える 1

0

@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);
});
于 2013-06-03T16:44:08.057 に答える