孩子點擊事件觸發父鼠標懸停事件

我有一個樹結構，其中節點名稱顯示（UL）列表上的鼠標懸停。列表中的每個項目都附帶一個點擊事件。我面臨的問題是當我單擊列表中的任何子項時，它會觸發附加到父跨度的mouseover事件。你們可以請幫忙解決這個問題嗎？孩子點擊事件觸發父鼠標懸停事件

<span id="treeNodeText"> 
<ul><li id="firstItem">First Item</li></ul> 
</span>

我的代碼是這樣的：我有騙子事件附加方法：

attachEvents(domId,eventType,callBackFunction,otherParams)

在的attachEvent功能我將事件附加到DOM ID和分配適當的回調函數

來源

2013-10-07 A.R

嗨，你可以請粘貼你的代碼 – AmGates

在你點擊之前，mouseover事件被觸發**。所以，除了拖延，你不能阻止它的處理。 –

爲什麼要在塊內嵌入元素？「跨度」是內聯元素，「ul」是塊元素。 – AmGates

的mouseover事件在您點擊前之前被解僱。所以，除了拖延，你不能阻止它的處理。

這裏的處理的一個方法：

var timer; document.getElementById("treeNodeText").addEventListener('mouseover', function(){ clearTimeout(timer); timer = setTimeout(function(){ // handle mouseover }, 400); // tune that delay (depending on the sizes of elements, for example) }); document.getElementById("firstItem").addEventListener('click', function(){ clearTimeout(timer); // prevents the mouseover event from being handled // handle click };

來源

2013-10-07 08:44:55

我這樣做了，但它不起作用。 –

@AsadRaza請檢查更新 –

Jan Dvorak，我需要顯示懸停在節點名稱上的列表。所以我需要鼠標懸停事件。 –

在JavaScript中，事件冒泡的DOM。請閱讀更多關於它的信息：event order and propagation或preventDefault/stopPropagation。

總之，你可以pervent事件通過

function callBackFunction(event){ 
    event.stopPropagation() 
}

或

function callBackFunction(event){ 
    return false 
}

return false還具有防止默認行爲的效果氣泡，所以它的技術上等同於：

function callBackFunction(event){ 
    event.stopPropagation() 
    event.preventDefault() 
}

來源

2013-10-07 09:07:44 whitehat101

這不是問題，因爲OP想阻止在父項中的鼠標懸停，而不是點擊。 –

不，event.stopPropagation（）或返回false不起作用。看起來像當我懸停在列表項上鼠標懸停在「treeNodeText」事件仍然在範圍內。 –

我的第一個鏈接應該爲您提供一些見解：http://www.quirksmode.org/js/events_order.html您可能需要重新考慮一些標記。 – whitehat101

function myfunction(e){ 
    e.stopPropagation() 
e.preventDefault() 
}

這將幫助

來源

2013-10-07 09:11:23

孩子點擊事件觸發父鼠標懸停事件

回答

相關問題