The Internet Explorer Event Model: Cancelling Event Bubbling - Doc JavaScript

Cancelling Event Bubbling

The most important feature in Internet Explorer 4.0x's new event model is the event bubbling mechanism. However, cancelling event bubbling for a specific event is equally important. In order to cancel bubbling for a specififc event you must set the cancelBubble property of the event object to true:

window.event.cancelBubble = true;

The following syntax is also valid:

event.cancelBubble = true;

Notice that it is unnecessary to specify the window object. We'll discuss the event object later in the column.

cancelBubble is a read-write property that takes a Boolean value. Its default value is false, specifying that the event should be bubbled up the hierarchy as usual. However, if explicitly set to true, the event isn't bubbled, preventing the next event handler in the hierarchy to receive the event.

The cancelBubble property or the window.event object is associated with a specific event. In other words, using this property to cancel bubbling for a specific event does not affect other events. For example, take a look at the following code segment:

<SCRIPT LANGUAGE="JavaScript">
<!--
function clickP() {
  alert("I am P.");
}
function clickB() {
  alert("I am B.");
}
// -->
</SCRIPT>
<P onClick="clickP()">
This is a paragraph, and
<B onClick="clickB()">these are bold words in the paragraph</B>.
</P>

If you click the regular (not bold) text, the clickP() function is invoked. If you click the bold text, the clickB() is called. The event then bubbles up to the P element, and the clickP() function is executed. For your reference, here's the preceding example in action:

This is a paragraph, and these are bold words in the paragraph.

Now take a look at the same code, with one small difference:

<SCRIPT LANGUAGE="JavaScript">
<!--
function clickP() {
  alert("I am P.");
}
function clickB() {
  alert("I am B.");
  event.cancelBubble = true;
}
// -->
</SCRIPT>
<P onClick="clickP()">
This is a paragraph, and
<B onClick="clickB()">these are bold words in the paragraph</B>.
</P>

The output of this code segment is as follows:

This is a paragraph, and these are bold words in the paragraph.

Notice that no change was made to the first function, clickP(). Therefore, when you click the regular (not bold) text, the clickP() function is executed as before. When you click the bold text, the clickB() function is invoked. After generating an alert dialog box, the function sets the event.cancelBubble property to true. Thus, the event doesn't bubble up to the next element (P), so clickP() isn't invoked.

Note that it's very unlikely that you'll ever need to set the event.cancelBubble property to false, because that's its default value. Furthermore, after setting it to true the event doesn't continue to bubble up the hierarchy, so no other event handler has an opportunity to catch it and to set its event.cancelBubble property back to false.

Another way to stop an event from bubbling is to entirely cancel the event by returning false in its event handler script or event processing function. However, unlike cancelling bubbling for an event, if you cancel the event itself the default action associated with the event does not take place.

Created: December 30, 1997
Revised: December 30, 1997

URL: https://www.webreference.com/js/column10/cancel.html