MouseOver/MouseOut繼承到子節點的EventListener？

編輯：解MouseOver/MouseOut繼承到子節點的EventListener？

感謝Gaby的幫助找到解決辦法！沒有完全按照我想要的方式工作，找到了從答案中修改的更好的解決方案。我所做的只是在兩個元素（目標和相關目標）不共享父項時執行mouseover/mouseout函數。

剛剛修改了Gaby的例子，並且一切都很好。只要您的彈出窗口與任何生成的div元素都在同一個div元素內（即使它位於主內容之外，您可以將其附加在溢出可見的位置），並且您不會在通往它的途中非共享元素之間移動，會一直活着。

divContents.addEventListener('mouseover', mouseEnter(showPopup, divContents)); 
divContents.addEventListener('mouseout', mouseEnter(hidePopup, divContents));

現在，修改後的mouseenter ...

function mouseEnter(_fn, _parent) { 
    return function(_evt) { 
     if(!shareParent(_evt.target, _evt.relatedTarget, _parent)) { 
      _fn.call(this, _evt); 
     } 
    } 
}; 

function shareParent(_object1, _object2, _parent) { 
    if (_object1 === _object2) { 
     return true; 
    } 
    while (_object1 && _object1 !== _parent) { 
     _object1 = _object1.parentNode; 
    } 
    while (_object2 && _object2 !== _parent) { 
     _object2 = _object2.parentNode; 
    } 

    return _object1 === _object2; 
}

解決我的問題都OK，因爲我想要火鼠標懸停當元素不共享的mouseout事件只會發生一位父母 - 我無論如何都打算展示彈出窗口。

再次感謝來自Gaby的代碼示例！

注意：沒有檢查shareParent函數中父級有效性的錯誤檢查，但它在到達樹頂部時應始終返回true（假定_parent實際上不是_object1的父級或_object2）。所以確保你傳遞給它的父對象是有效的。

原題：

我有現在在JavaScript中的一個問題。

我想創建一個div元素，當某些鼠標懸停時，它會動態彈出。 div直接與產生它的對象相鄰。

divCreator.addEventListener('mouseover', createPopup, true); 
divCreator.addEventListener('mouseout', hidePopup, true);

創建彈出窗口。現在，在彈出窗口中，當我創建它，我跑這之前，我把它添加到文檔：

divPopup.addEventListener('mouseover', createPopup, true); 
divPopup.addEventListener('mouseout', hidePopup, true);

這樣可以確保當我將鼠標放置在彈出窗口中，它保持它活着（因爲divCreator鼠標移開必火）當我彈出它的彈出消失。

但是，使用此方法，只要我將鼠標懸停在子元素上，它就會檢測父元素（divPopup）中的mouseout事件並關閉div。

我可以讓孩子們「透明」參加活動嗎？可以說話嗎？

來源

2011-12-06 kwh

有兩個事件處理這種情況。

該mouseenter^{W3 DOM3 docs}和mouseleave^{W3 DOM3 docs}但他們目前在DOM3 Events working draft。

它們是由微軟IE5.5引入的，並且Firefox已經在v10中增加了支持。

一種解決方法是手動檢查，如果新鼠標懸停元素是你的頂級之一的孩子取消處理程序的執行..改編自http://blog.stchur.com/2007/03/15/mouseenter-and-mouseleave-events-for-firefox-and-other-non-ie-browsers/

代碼

divCreator.addEventListener('mouseover', mouseEnter(createPopup), true); divCreator.addEventListener('mouseout', mouseEnter(hidePopup), true); function mouseEnter(_fn) { return function(_evt) { var relTarget = _evt.relatedTarget; if (this === relTarget || isAChildOf(this, relTarget)) { return; } _fn.call(this, _evt); } }; function isAChildOf(_parent, _child) { if (_parent === _child) { return false; } while (_child && _child !== _parent) { _child = _child.parentNode; } return _child === _parent; }

演示在http://jsfiddle.net/gaby/jMvHv/（打開控制檯日誌消息）

來源

2011-12-06 12:12:56

謝謝！並沒有完全得到我想要的，但它對我的幫助非常大。發佈我自己的解決方案（從你的修改）在一瞬間。 – kwh

MouseOver/MouseOut繼承到子節點的EventListener？

回答

相關問題