MouseOver / MouseOut EventListener inheriting child nodes?

Question

Edit: solution

Thanks to Gaby for helping me find a solution! It didn’t work exactly as I wanted it, I found the best solution, changed from the answers. What I am doing is only performing the functions of mouseover / mouseout when two elements (the target and the associated goals) do not use the parent .

Just changed the Gaby example and everything works fine. As long as your popup is within the same div element that it all spawns (even if it is outside the main content, you can add it with overflow visible), and you don’t go between non-shared elements on the way to it, this " Stay alive. "

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

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

Solved my A-OK problem, because what I want to fire for mouseover and mouseout events only happens when the elements do not share the parent - just like I planned to show pop-ups.

Thanks again for the sample code from Gaby, though!

NOTE. . Error checking for parental reality in the shareParent function has not been verified, but it should always return true when it hits the top of the tree (assuming that _parent is not actually the parent object of either _object1 or _object2). Therefore, make sure that the parent you pass to it is valid.

The original question:

I have a problem with JavaScript right now.

I am trying to create a div element that appears dynamically when something has a mouseover. A div is created directly next to the object that creates it.

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

This creates a popup. Now, in the popup, when I create it, I launch it before adding it to the document:

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

This ensures that if I hang up a pop-up window, it will save it in memory (because it will be displayed by the mouse divCreator), and when I exit the pop-up window, it will disappear.

However, using this method, whenever I hover over a button on a child, it detects the mouseout event from the parent (divPopup) and closes the div.

Can I make Events transparent to children, so to speak?

Answer 1

In this case, two events are processed.

mouseenter ^{W3 DOM3 docs} and mouseleave ^{W3 DOM3 docs} , but they are in the DOM3 Events work project.

They were introduced by Microsoft IE5.5, and Firefox added support in version 10.

---

The workaround is to manually check and cancel your handler if the new moused-over element is your top-level child.

code adapted from 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; } 

Demo at http://jsfiddle.net/gaby/jMvHv/ (open console for log messages)