Created
July 17, 2012 04:18
-
-
Save toruta39/3127081 to your computer and use it in GitHub Desktop.
Prevent mouseout/mouseover event triggered when moving onto/from a child element
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en-US"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Prevent additional mouse event</title> | |
| </head> | |
| <body> | |
| <div id="ele" style="width: 300px; height: 300px; background-color: #0FF;"> | |
| This is the parent element. | |
| <div style="width: 200px; height: 200px; background-color: #FFF;"> | |
| This is the child element. | |
| <div style="width: 150px; background-color: #000; color: #FFF"> | |
| Grand child element. | |
| </div> | |
| </div> | |
| </div> | |
| <script type="text/javascript" src="preventAdditionalMouseEvent.js"></script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var ele = document.getElementById("ele"); | |
| var over = 0, out = 0; | |
| //Detect if otherNode is contained by refNode | |
| function isParent(refNode, otherNode) { | |
| var parent = otherNode.parentNode; | |
| do { | |
| if (refNode == parent) { | |
| return true; | |
| } else { | |
| parent = parent.parentNode; | |
| } | |
| } while (parent); | |
| return false; | |
| } | |
| ele.addEventListener("mouseover", function(ev){ | |
| //Make sure that the mouseover event isn't triggered when moving from a child element | |
| //or bubbled from a child element | |
| if (!isParent(this, ev.relatedTarget) && ev.target == this){ | |
| //Event handling code here | |
| this.style.backgroundColor = "#FF0"; | |
| this.childNodes[0].nodeValue = "Mouseover: " + ++over +", Mouseout: " + out + "."; | |
| } | |
| }, false); | |
| ele.addEventListener("mouseout", function(ev){ | |
| //Make sure that the mouseout event is triggered when moving onto a child element | |
| //or bubbled from a child element | |
| if (!isParent(this, ev.relatedTarget) && ev.target == this){ | |
| //Event handling code here | |
| this.style.backgroundColor = "#0FF"; | |
| this.childNodes[0].nodeValue = "Mouseover: " + over +", Mouseout: " + ++out + "."; | |
| } | |
| }, false); |
In many cases, another solution would be setting "pointer: none;" in all children elements.
Thank you! This was incredibly helpful. It's
pointer-events:nonethough.
pointer-events:noneworked perfectly, thanks!
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Thanks, working like a charm!