子点击事件触发父鼠标悬停事件

Question

I have tree structure in which mouse over on node name displays (UL) list. Each item in the list has a click event attached to it. The issue Im facing is when I click on any child item in list, it fires the mouseover event attached to parent span. Can you guys please help how to solve this issue?

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

My code is like this: I have conman event attach method:

attachEvents(domId,eventType,callBackFunction,otherParams)

In attachEvent function I attach events to dom ids and assign appropriate call back functions

Answer 1

The mouseover event is fired before you click. So, apart with a delay, you can't prevent its handling.

Here's one way to deal with that :

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
};

Answer 2

In JavaScript, events bubble up the DOM. Please read more about it: event order and propagation or preventDefault/stopPropagation .

In short, you can pervent event bubbling by

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

or

function callBackFunction(event){
  return false
}

return false also has the effect of preventing the default behavior, so it's technically equivalent to:

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

Answer 3

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

this will Help