1. ホーム
  2. jquery

[解決済み] 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でこれを回避することができます。