Child Click Event Firing Parent Mouseover Event

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

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

Solution 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){
  returnfalse
}

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

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

Solution 3:

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

this will Help