How can I stop parent events from firing?

Question

If I have...

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

How can I make it so that doSomething() is not executed when I'm hovering over the child? I only want doSomethingElse() to execute when I'm hovering over the child, and I only want doSomething() to execute when I'm hoving over the parent.

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

Matt

Answer 1

function doSomethingElse(e) {
// your function body

e.stopPropagation() 

}

Answer 2

Change the attribute value to

onmouseover="doSomethingElse(event)"

and change doSomethingElse() to

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

Answer 3

Hi.

I didn't test it, but there should be a few ways to do it.

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