web-dev-qa-db-ja.com

マウスが要素の上に少なくとも1秒間ホバーされた場合にのみ、mouseoverイベントを発生させる方法は？

ユーザーが特定の画像の上にマウスを置いたときにダイアログを表示したい。その部分は機能します。残念ながら、マウスが画像の隅をすばやく通過しただけでも、ダイアログが表示されます。不注意によるポップアップを回避するために、マウスを1秒間画像の上に置いた場合にのみダイアログを表示させたいと思います。

私は この質問 を見ましたが、それはjQuery用で、Prototypeを使用しています。私はそのソリューションを解釈するのに十分なjQueryを知りません。

誰かがマウスオーバーイベントの遅延発火を引き起こすために必要なロジックまたはJavaScript機能を説明できれば、私はそれを感謝します。

javascriptprototypejs
24
John Conde

イベントの発生を遅らせることはできませんが、イベントの処理を遅らせることはできます。

以下に、jQueryまたはPrototypeを使用せずに簡単に理解できる例を示します。

var delay = function (elem, callback) {
    var timeout = null;
    elem.onmouseover = function() {
        // Set timeout to be a timer which will invoke callback after 1s
        timeout = setTimeout(callback, 1000);
    };

    elem.onmouseout = function() {
        // Clear any timers set to timeout
        clearTimeout(timeout);
    }
};


delay(document.getElementById('someelem'), function() {
    alert("Fired");
});
50
Robert

Robert（ありがとう）に触発され、テーブルからデータの詳細をロードするためにこれを使用します。

<tr onmouseover="funcDelay= setTimeout('loadData(5)', 1000)" onmouseout="clearTimeout(funcDelay)">

そしてデータをロードするための機能

function fLoadDatDetail(vZadId) {
  $("#divId").load("/controller/function/"+vZadId);
}

詳細を表示するには、<TABLE>の1行の上にマウスを1秒置く必要があります。

4
Mareg

hoverintent http://cherne.net/brian/resources/jquery.hoverIntent.html を確認してください。これは、まさに望みどおりの動作をします。

私は通常、回答へのリンクを投稿しませんが、使いやすく、それを読んで学ぶとよいでしょう。

3
Mertis

ロジックは次のとおりです。

マウスがオブジェクト上を移動すると、タイマーが作成され、1000ミリ秒でトリガーされます。マウスがオブジェクトから離れたときに、タイマーがまだトリガーされていない場合、タイマーは無効になり、メモリーから削除されてトリガーできなくなります。

2
Matt Razza