7

マウスが一定期間動かない場合、マウスを非表示にしようとしています。

これは私が使用しているコードです:

$(document).ready(function() {
    var j;
    $(document).mousemove(function() {
        clearTimeout(j);
        $('html').css({cursor: 'default'});
        j = setTimeout('hide();', 1000);
    });
});

function hide() {
    $('html').css({cursor: 'none'});
}

hide() 関数が呼び出されると、カーソルは非表示になりますが、数秒後に再表示されます。どんな助けでも大歓迎です。

4

3 に答える 3

5

最初の問題は、マウスを非表示にするとトリガーmousemoveされ、すぐにデフォルトにリセットされることです。だから、あなたはこのようにそれを解決することができます...

var justHidden = false;

$(document).ready(function() {
    var j;
    $(document).mousemove(function() {
        if (!justHidden) {
            justHidden = false;
            console.log('move');
            clearTimeout(j);
            $('html').css({cursor: 'default'});
            j = setTimeout('hide();', 1000);
        }
    });
});

function hide() {
    $('html').css({cursor: 'none'});
    justHidden = true;
}​

...ぶううううう...

ここで、現時点では解決できない問題に直面しています。つまり、非表示のマウスはトリガーされないmousemoveため、非表示にすると、私が知る限り、非表示を解除することはできません。

抜けている解決策がないか調査を続けます。

于 2012-05-12T15:02:50.930 に答える
0

2019 年にこの課題の解決策を探していたときに、このスレッドを見つけました。ここでの回答と「JavaScript を使用してアイドル状態のときにマウス カーソルを非表示にする」に基づいて、少し異なる解決策を作成しました。

var DEMO = {
  INI: {
    MOUSE_IDLE: 3000
  },
  hideMouse: function() {
    $("#game").css('cursor', 'none');
    $("#game").on("mousemove", DEMO.waitThenHideMouse);
  },
  waitThenHideMouse: function() {
    $("#game").css('cursor', 'default');
    $("#game").off("mousemove", DEMO.waitThenHideMouse);
    setTimeout(DEMO.hideMouse, DEMO.INI.MOUSE_IDLE);
  },
  showMouse: function() {
    $("#game").off("mousemove", DEMO.waitThenHideMouse);
    $("#game").css('cursor', 'default');
  },
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

この単純明快な例では、マウスの非表示を開始するオプション ( DEMO.hideMouse()) と、これをオフにするオプション ( ) を示していますDEMO.showMouse()。同じ要素に複数のイベントを作成しません。#gameこの例では、マウス ポインターをdiv 要素上で非表示にしています。これを選択した div または に変更するだけbodyです。

2019 年 10 月に完全に更新された Chrome と FF の時点で、両方で動作します。

于 2019-10-29T09:57:58.260 に答える