[解決済み] jqueryのホバーイベントを遅延させる?
2023-02-19 23:20:15
質問
jqueryでホバーイベントを遅延させたい。 私は、ユーザーがリンクまたはラベルの上にカーソルを置いたときにファイルから読み込んでいます。 私は、ユーザーが画面上でマウスを動かしている場合に備えて、このイベントがすぐに発生しないようにしたいです。 イベントが発生するのを遅らせる方法はありますか?
ありがとうございます。
コード例です。
$(function() {
$('#container a').hover(function() {
$('<div id="fileinfo" />').load('ReadTextFileX.aspx',
{filename:'file.txt'},
function() {
$(this).appendTo('#info');
}
);
},
function() { $('#info').remove(); }
});
});
UPDATEです。 (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
これは、あなたが説明したことにまったく完璧で、メニューなどのマウスオーバーによる起動が必要なほぼすべてのプロジェクトで使用しました。
たとえば、iPhone のサファリのようなモバイル ブラウザーでは、「ホバー」状態がない場合があります。そのようなデバイスで開く方法がないため、インターフェイスまたはナビゲーションの重要な部分を隠している可能性があります。デバイス固有のCSSでこれを回避することができます。
関連
-
[解決済み] jest.fn()の値はモック関数またはスパイである必要があります。
-
[解決済み] jQueryで要素が非表示になっているかどうかを確認するには?
-
[解決済み] jQueryでチェックボックスに "checked "を設定する
-
[解決済み] jQueryの「exists」関数はありますか?
-
[解決済み] どのラジオボタンが選択されているかをjQueryで知るにはどうしたらよいですか?
-
[解決済み] jQueryでページを更新するにはどうすればよいですか?
-
[解決済み] jQueryでテーブルの行を追加する
-
[解決済み] jQueryで要素にスクロールする
-
[解決済み] 動的に生成された要素にイベントバインディングを行うか?
-
[解決済み】jQueryでチェックボックスがチェックされているかどうかを確認するにはどうすればよいですか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
echarts-all.js:1 Uncaught TypeError: nullのプロパティ'getAttribute'を読み取ることができません。
-
[解決済み] クラスメソッド内の "this "をタイプスクリプトで記述する
-
[解決済み] jQuery UIダイアログのクローズボタンを削除するには?
-
[解決済み] 動的に生成された要素でクリックイベントが動作しない [duplicate]
-
[解決済み] jQueryがどのバージョンで読み込まれているかを確認するには?
-
[解決済み] Bootstrapのモーダルを閉じる
-
[解決済み] jQueryで5秒待つには?
-
[解決済み] jQuery .onとhoverの使い分けは可能ですか?
-
[解決済み] jQueryのn番目の要素を取得する方法
-
[解決済み】$(window).width()がメディアクエリとは違う