jQuery:マウスはまだ要素上にありますか?
-
13-09-2019 - |
質問
次のシナリオで、マウスがまだ要素上にあるかどうかを検出できるようにしたいと考えています。
- マウスオーバーすると数秒間スリープします。
- 完了したマウスのスリープ チェックは引き続き同じ要素上にあります。
- 本当なら何かをしてください。
どうすれば#2を達成できますか?
ありがとう。
解決
jQueryのための hoverIntent のプラグインを見てみましょう。それはあなたがある程度の時間要素の上にホバリングされている場合にのみ発生します新しいイベントハンドラを提供します。そのオプションを微調整することで、あなたはそれが正確に何をしたい行うために取得することができる必要があります。
他のヒント
これは動作するようです( http://jsbin.com/uvoqeする)
$("#hello").hover( function () {
$(this).data('timeout', setTimeout( function () {
alert('You have been hovering this element for 1000ms');
}, 1000));
}, function () {
clearTimeout($(this).data('timeout'));
});
ただ、マウスが上にあるかどうかを伝えるためにフラグを使用します。
var mouseover = false;
$('.thing').mouseenter(function(){
mouseover = true;
}).mouseleave(function(){
mouseover = false;
});
ここに1つの方法です。
あなたが設定されている場合は、 .hover()の要素に、あなたは2つの機能を渡すことができますそれ。マウスが要素上にあるときにマウスが出て移動したときに最初のものは、第二火災を発生します。
第一の機能はcurrentElementId
(またはいくつかの他のフラグ)を設定することができる第2の機能は、それをクリアします。この方法であなたがする必要がある唯一のものはcurrentElementId
が空白かどうかをチェックすることです。
あなたは、設定時間後に関数を呼び出すためにsetTimeout( 'sleep', sleep_time )
を使用することができます。
へのonmouseoverとれるonmouseoutイベントハンドラを割り当てます。
これらのハンドラは、マウスが要素の上に残っているかどうかを確認するためのフラグを変更します。
スリープ機能の内部では、フラグをチェックし、それを返すことができます。
私はその後div
イベントで、私はこれのタイムアウトプロパティを設定しhover
andを表示するために、ハイパーリンクを使用して、すぐに私は私のdiv
に行くように私はタイムアウトをクリアしdiv
をフェードアウトするhover
のdiv
機能の使用を開始します。私は、これはあなたを助けることを願っています。
<script type="text/javascript">
$(document).ready(function () {
var obj;
$("a").hover(function () {
if ($("#div1").is(":hidden")) {
$("#div1").fadeIn(300).show();
}
}, function () {
obj = setTimeout("jQuery('#div1').fadeOut(300);", 300);
});
$("#div1").hover(function () {
clearTimeout(obj);
if ($("#div1").is(":hidden")) {
$("#div1").show();
}
}, function () {
jQuery('#div1').fadeOut(300);
});
});
</script>