jqueryホバーイベントを遅延しますか?
-
22-07-2019 - |
質問
jqueryでホバーイベントを遅延させたいのですが。ユーザーがリンクまたはラベルにカーソルを合わせると、ファイルから読み取ります。ユーザーがマウスを画面上で動かしているだけの場合に、このイベントがすぐに発生するのは望ましくありません。イベントの発生を遅らせる方法はありますか?
ありがとう。
サンプルコード:
$(function() {
$('#container a').hover(function() {
$('<div id="fileinfo" />').load('ReadTextFileX.aspx',
{filename:'file.txt'},
function() {
$(this).appendTo('#info');
}
);
},
function() { $('#info').remove(); }
});
});
更新: (1/14/09) HoverIntentプラグインを追加した後、それを実装するために上記のコードは次のように変更されました。実装が非常に簡単です。
$(function() {
hiConfig = {
sensitivity: 3, // number = sensitivity threshold (must be 1 or higher)
interval: 200, // number = milliseconds for onMouseOver polling interval
timeout: 200, // number = milliseconds delay before onMouseOut
over: function() {
$('<div id="fileinfo" />').load('ReadTextFileX.aspx', {filename:'file.txt'},
function() {
$(this).appendTo('#info');
}
);
}, // function = onMouseOver callback (REQUIRED)
out: function() { $('#info').remove(); } // function = onMouseOut callback (REQUIRED)
}
$('#container a').hoverIntent(hiConfig)
}
解決
jqueryにhoverIntentプラグインを使用します: http://cherne.net/brian/resources /jquery.hoverIntent.html
あなたが説明するものには絶対に完璧で、メニューなどのマウスオーバーアクティベーションを必要とするほぼすべてのプロジェクトで使用しました...
このアプローチには1つの落とし穴があります。一部のインターフェイスには、「ホバー」状態がありません。 iPhoneのサファリなどのモバイルブラウザ。インターフェイスやナビゲーションの重要な部分を非表示にしている場合、そのようなデバイスで開くことはできません。デバイス固有のCSSでこれを回避できます。
他のヒント
ホバー時にタイマーを確認する必要があります。存在しない場合(つまり、これが最初のホバー)、作成します。存在する場合(つまり、これが最初のホバーではない )、それを強制終了して再起動します。タイマーペイロードをコードに設定します。
$(function() {
var timer;
$('#container a').hover(function() {
if(timer) {
clearTimeout(timer);
timer = null
}
timer = setTimeout(function() {
$('<div id="fileinfo" />').load('ReadTextFileX.aspx',
{filename:'file.txt'},
function() {
$(this).appendTo('#info');
}
);
}, 500)
},
// mouse out
});
});
jQueryには、これをすべてラップする機能があるはずです。
編集:ああ、 jQueryプラグインによる救助 a>
hoverIntentが最適なソリューションであることに完全に同意しますが、jQueryプラグインの承認のための長くて長期にわたるプロセスを持つWebサイトで作業する不幸なsodである場合は、ここで私にとってうまく機能する迅速で汚いソリューションがあります:
$('li.contracted').hover(function () {
var expanding = $(this);
var timer = window.setTimeout(function () {
expanding.data('timerid', null);
... do stuff
}, 300);
//store ID of newly created timer in DOM object
expanding.data('timerid', timer);
}, function () {
var timerid = $(this).data('timerid');
if (timerid != null) {
//mouse out, didn't timeout. Kill previously started timer
window.clearTimeout(timerid);
}
});
これは、<!> lt; li <!> gt;を展開するためのものです。マウスが300ミリ秒以上その上にあった場合。
mouseoutイベントでclearTimeout()を指定してsetTimeout()呼び出しを使用できます。
2016年、Crescent Freshのソリューションは期待どおりに機能しなかったため、次のように思いつきました。
$(selector).hover(function() {
hovered = true;
setTimeout(function() {
if(hovered) {
//do stuff
}
}, 300); //you can pass references as 3rd, 4th etc. arguments after the delay
}, function() {
hovered = false;
});
私の解決策は簡単です。ユーザーがobjでmouseenterを300ミリ秒以上保持している場合、開いているメニューを遅らせる:
var sleep = 0;
$('#category li').mouseenter(function() {
sleep = 1;
$('#category li').mouseleave(function() {
sleep = 0;
});
var ob = $(this);
setTimeout(function() {
if(sleep) {
// [...] Example:
$('#'+ob.attr('rel')).show();
}
}, 300);
});