檢查是否從事件處理函數觸發了另一個事件

Question

假設我有一個附加到圖像的事件處理程序函數，例如， onmouseover處理程序。 如果特定元素觸發了onmouseover事件，我不希望此處理程序運行。

更具體地說，我有一個懸停的圖像，彈出一個菜單。 如果鼠標移出該圖像，我想關閉該菜單，除非我將鼠標移到與該圖像相鄰的菜單。

所以在偽代碼中是這樣的：

img.mouseout = function () {
if (otherelement.onmouseover.fired) {
 leave the menu as it is
} 
else 
{
close the menu
}

那么如何檢查是否觸發了另一個事件？

Answer 1

我會添加一個超時和一個鼠標懸停處理程序，在另一個處理程序中清除它。 雖然元素可以在視覺上完全相鄰，但添加一個小計時器更安全，因為可能只有一個 1px 的微小區域觸發 mouseout 事件，從而導致難看的閃爍。

這也允許快速鼠標搖動而不會閃爍。

就像是：

var timer;

img.onmouseout = other.onmouseout = function() {
  timer = setTimeout(closemenu, 100);
}

img.onmouseover = other.onmouseover = function() {
  clearTimeout(timer);
}

function closemenu() {
  // close it
}