Have Geek Brain

How do I stop interrupting parenting events?

If I have...

<div id="parent" onmouseover="doSomething()">
    <div id="child" onmouseover="doSomethingElse()">
    </div>
</div>

How can I make it so that doSomething () doesn't execute when I hover over a child? I want doSomethingElse () to execute when I hover over the child and I want doSomething () to execute when I hover over the parent.

Whenever I hover over the child, both functions are executed. Any ideas?

Matt

+1


a source to share


3 answers 


function doSomethingElse(e) {
// your function body

e.stopPropagation() 

}


+1


a source


Change the value of the attribute to

onmouseover="doSomethingElse(event)"


and change doSomethingElse()

to

function doSomethingElse(e) {
    e.stopPropagation && e.stopPropagation();
    e.cancelBubble = true;
    // ...
}
+1


a source


I haven't tested it, but there should be several ways to do this.

Please check event bubbles: it's different in IE and Firefox, but still: www.quirksmode.org/js/events_order.html

0


a source






More articles:


All Articles