只有當鼠標懸停在元素上至少1秒鐘時，才能觸發mouseover事件？

我想顯示一個對話框，當用戶將鼠標懸停在某個圖像上時。該部分起作用。不幸的是，如果鼠標即使剛剛通過圖像的角落，它也會顯示對話框。我希望僅當鼠標在圖像上停留一整秒時才顯示對話框，以避免無意中彈出窗口。只有當鼠標懸停在元素上至少1秒鐘時，才能觸發mouseover事件？

我看到this question但它是jQuery和我使用的原型。我不太瞭解jQuery來解釋這個解決方案。

如果有人可以解釋，將被要求使鼠標懸停事件中，我將不勝感激的延遲點火的邏輯或JavaScript功能。

來源

2011-06-03 John Conde

好，如果你覺得學習一些簡單的jQuery，我張貼的答案會是很容易實現 – Mertis 2011-06-03 18:30:23

http://jsfiddle.net/XGghY/ – Jan 2011-06-03 18:35:08

不能耽誤大事的射擊，但可以延遲事件處理。

下面是一個沒有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"); 
});

來源

2011-06-03 18:26:05 Robert

+10

+1說「更容易」 – 2011-06-03 18:27:18

大聲笑，很好......甚至沒有抓到，而打字......離開那樣。 – Robert 2011-06-03 18:27:52

我在想，我將不得不在延遲後檢查鼠標座標。我甚至沒有想到我可以清除鼠標暫停時間。輝煌 – 2015-11-06 17:45:37

的邏輯如下：

當通過一個定時器被創建的對象，將在1000毫秒觸發鼠標移動。當鼠標離開對象時，如果定時器尚未觸發，定時器將被禁用並從內存中移除，防止觸發。

來源

2011-06-03 18:20:25

應該注意的：你不能*延遲*的射擊mouseover事件。該解決方案的功能是檢測鼠標懸停是否在1000毫秒內跟隨鼠標移出，並防止顯示對話框。 – Femi 2011-06-03 18:23:50

退房的hoverintent http://cherne.net/brian/resources/jquery.hoverIntent.html 它會做的正是你想要的。

我不經常帖子的鏈接到的答案，但它是易於使用，並且會很好讀了它，學習它。

來源

2011-06-03 18:22:39 Mertis

從我的理解OP不使用jQuery。 Prototype中是否有類似的系統，或者不依賴於jQuery？ – 2011-06-03 18:26:15

啊廢話我沒有讀...... – Mertis 2011-06-03 18:28:33

我有一個傾向，閱讀一個問題，並像「哦，好東西我可以回答的問題!!」並沒有仔細閱讀整個事情來回答它。 – Mertis 2011-06-03 18:29:20

我羅伯特（感謝），並從表啓發，加載數據的細節我用這個：

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

和功能的負載數據

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

你必須保持鼠標1第二個在<TABLE>的一行上，以獲得它的細節。

來源

2013-11-14 15:02:12 Mareg

只有當鼠標懸停在元素上至少1秒鐘時，才能觸發mouseover事件？

回答

相關問題