Question

I’m working on the event-handling code for a JavaScript library, and I’m trying to implement something similar to stopImmediatePropagation() that will also work in IE 6.

The way the event handing works currently, is that our event handing code registers with the object, and then users register all their events with our event handlers.

The first way I tried to emulate stopImmediatePropagation() was to simply add that method to the event if it didn’t already exist:

if (event != null && event.isImmediatePropagationEnabled == null) {
    event.stopImmediatePropagation = function () {
        this.isImmediatePropagationEnabled = false;
    };
    event.isImmediatePropagationEnabled = true;
    event.isImmediatePropagationStopped = function () {
        return !this.isImmediatePropagationEnabled;
    };
}

When the users’ event handler callbacks are called, they’re passed in the same event object we get. They can call stopImmediatePropagation() on the event if they wish.

As we’re looping through all the event handling callbacks registered with us, we check the propagation boolean each time:

given some event
for [all the callbacks] {
    if (event != null &&
        event.isImmediatePropagationStopped != null &&
        event.isImmediatePropagationStopped()) {
        stopPropagation = true;
        break;
    }
    
    execute the callback, passing in the event
}

This works great in some browsers. Because the event persists, even once our event handling code exits and the event bubbles up to the next element, once our event handing code gets hit again the isImmediatePropagationStopped property still exists, and so no more callbacks (that are registered with us) are executed.

In Internet Explorer (even in 8), this doesn’t work. On the same element, things are fine; but once the event bubbles, it seems like an entirely new event object is generated, and we lose the isImmediatePropagationStopped property. This means we can’t check if the user turned off propagation.

So my question is, does anyone have any ideas on how to do this? I know that jQuery manages a similar feat ( http://bugs.jquery.com/ticket/3355 ), but they do it a similar way – storing it in extra data for the object. What I don’t know is how the non-persistence of the object doesn’t hurt them like it does me. (And for various reasons, using jQuery itself is not an option here)

If anyone has any insights – either due to knowing more about JavaScript than me, or because they can think of a neat way to do this – I’d greatly appreciate it.

Answer 1

Try changing your function a little:

event.stopImmediatePropagation = function () {
    this.isImmediatePropagationEnabled = false;
    this.cancelBubble = true;
};

That “cancelBubble” flag is an IE thing, and it should prevent the event from bubbling up the parent DOM element chain.