web-dev-qa-db-ja.com

jqueryホバーイベントを遅延しますか？

Jqueryでホバーイベントを遅延させたいのですが。ユーザーがリンクまたはラベルにカーソルを合わせたときにファイルから読み取ります。ユーザーがマウスを画面上で動かしているだけの場合に、このイベントがすぐに発生するのは望ましくありません。イベントの発生を遅らせる方法はありますか？

ありがとうございました。

サンプルコード：

$(function() {
    $('#container a').hover(function() {
        $('<div id="fileinfo" />').load('ReadTextFileX.aspx',
            {filename:'file.txt'},
            function() {
                $(this).appendTo('#info');
            }
         );
    },
        function() { $('#info').remove(); }
    });
});

PDATE：（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)
}
jqueryeventsmouseeventsettimeout
93
Brettski

JqueryにhoverIntentプラグインを使用します。 http://cherne.net/brian/resources/jquery.hoverIntent.html

それはあなたが説明するものに絶対に完璧であり、メニューなどのマウスオーバーアクティベーションを必要とするほぼすべてのプロジェクトで使用しました...

このアプローチには1つの落とし穴があります。一部のインターフェイスには、「ホバー」状態がありません。 iPhoneのサファリなどのモバイルブラウザ。インターフェイスやナビゲーションの重要な部分を非表示にしている場合、そのようなデバイスで開くことはできません。デバイス固有のCSSでこれを回避できます。

91
roborourke

ホバー時にタイマーを確認する必要があります。存在しない場合（つまり、これが最初のホバー）、作成します。存在する場合（つまり、これがnot最初のホバー）、それを強制終了して再起動します。タイマーペイロードをコードに設定します。

$(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には、これをすべてラップする機能があると思います。

Edit：ああ、そうです jQuery plugin to the rescue

49
Crescent Fresh

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);
    }
});

これは、マウスが300ミリ秒以上その上にあった場合に<li>を展開するためのものです。

11
Matthew Millman

MouseoutイベントでclearTimeout（）を指定してsetTimeout（）呼び出しを使用できます。

6
Dan Monego

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;
});
1
the_web