Question

I have an element nested in another element. I have a mouseover event registered on the outer element. It fires both when my mouse enters the outer element, and when it enters the inner element. How can I turn off the event firing on the inner element?

Answer 1

Events fire on objects then bubble up the DOM tree. But you can stop them from bubbling with event.stopPropagation(). This only works on standards-compliant browsers (not all but the most recent versions of IE).

innerElement.addEventListener('mouseover', function (event) {
    event.stopPropagation();
}, false);

IE’s version will be:

innerElement.attachEvent('onmouseover', function () {
    window.event.cancelBubble = true;
});

So altogether:

function listener(event) {
    event = event || window.event;
    if (event.stopPropagation) {
        event.stopPropagation();
    } else {
        event.cancelBubble = true;
    }
}
if (innerElement.addEventListener) {
    innerElement.addEventListener('mouseover', listener, false);
} else {
    innerElement.attachEvent('onmouseover', listener);
}