In order to access this site you need to enable JavaScript!

You are here: Reference > JavaScript > client-side > event handling > properties > cancelBubble (event)

cancelBubble property (event)

Browser support:

9

Sets or retrieves a Boolean value that indicates whether the current event should propagate up the DOM hierarchy, or not.

There are two types of events, one propagates up the DOM hierarchy, the other does not.

For example the onclick event bubbles up the DOM hierarchy, the onfocus event does not.

onclick (bubbles up):

When the user clicks on a button, an onclick event is sent to the button element first.
After that, the onclick event is sent to the parent element of the button.
After that, the onclick event is sent to the parent element of the parent element of the button, and so on ...

onfocus (does not bubbles up):

The onfocus event is sent only to the button element.

The bubbles property returns whether the an event can propagate up the DOM hierarchy or not. Therefore the bubbles property returns true in case of the onclick event and returns false when an onfocus event happened. Try Example 1 to test it.

Note that the order of propagation can be different for the body, document and window objects in browsers. See Example 2 for details.

When an event can bubble up, you can stop its propagation with the cancelBubble property or the stopPropagation method. Use the stopPropagation method in Firefox, Opera, Google Chrome and Safari, because the cancelBubble property is deprecated in those browsers. Internet Explorer also supports the stopPropagation method from version 9. In Internet Explorer before version 9, use the cancelBubble property, because the stopPropagation method is not supported.
With the cancelBubble property, you cannot allow the propagation of events that cannot bubble up, you can only prevent the propagation of events that can. Note that the use of the stopPropagation method or the cancelBubble property on an event that cannot propagate does not cause an error.

The properties and methods mentioned above are related to event propagation. If you need to suppress the default action for an event, then see the page for the preventDefault method or the returnValue property. If you need more information about event propagation and capturing, see the page for the event object.

Syntax:

object.cancelBubble;

You can find the related objects in the Supported by objects section below.

This property is read/write.

Possible values:

Boolean that indicates the propagation rules.

One of the following values:

false

Default. The event propagates up the DOM hierarchy.

true

The propagation is diasbled for this event.

Default: false.

Example HTML code 1:

This example illustrates the event bubbling for the onclick and onchange events:

<head>
    <script type="text/javascript">
        function ProcessEvent (event, eventName, elementName, stopPropagate) {
            WriteInfo ("The " + elementName + " element got an " + eventName + " event.");
            if (stopPropagate) {
                if ('bubbles' in event) {   // all browsers except IE before version 9
                    if (event.bubbles) {
                        event.stopPropagation ();
                        WriteInfo ("The propagation of the " + eventName + " event is stopped.");
                    }
                    else {
                        WriteInfo ("The " + eventName + " event cannot propagate up the DOM hierarchy.");
                    }
                }
                else {  // Internet Explorer before version 9
                        // always cancel bubbling
                    event.cancelBubble = true;
                    WriteInfo ("The propagation of the " + eventName + " event is stopped.");
                }
            }
        }

        function WriteInfo (message) {
            var info = document.getElementById ("info");
            info.innerHTML += message + "<br />";
            info.scrollTop = info.scrollHeight;
        }
    </script>
</head>
<body onclick="ProcessEvent (event, 'onclick', 'body', false);" 
      onfocus="ProcessEvent (event, 'onfocus', 'body', false);">

    The following button allows the propagation of the onclick and onfocus events:<br />
    <button onclick="ProcessEvent (event, 'onclick', 'first button', false);" 
            onfocus="ProcessEvent (event, 'onfocus', 'first button', false);">Allow propagation</button>
    <br /><br />
    The following button stops the propagation of the onclick and onfocus events:<br />
    <button onclick="ProcessEvent (event, 'onclick', 'second button', true);" 
            onfocus="ProcessEvent (event, 'onfocus', 'second button', true);">Stop propagation</button>
    <br /><br />

    Information about the events:<br />
    <div id="info" style="width:400px; height:200px; overflow:auto; background-color:#e0a0d0;"></div>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example demonstrates the difference of the propagation chains in browsers:

<head>
    <script type="text/javascript">
        function WriteInfo (message) {
            var info = document.getElementById ("info");
            info.innerHTML += message + "<br />";
            info.scrollTop = info.scrollHeight;
        }

        function OnWindowClick () {
            WriteInfo ('window');
        }

        function OnDocumentClick () {
            WriteInfo ('document');
        }

        function Init () {
            if (window.addEventListener) {      // all browsers except IE before version 9
                window.addEventListener ("click", OnWindowClick, false);
            }
            else {
                if (window.attachEvent) {       // IE before version 9
                    window.attachEvent ('onclick', OnWindowClick);
                }
            }

            if (document.addEventListener) {    // all browsers except IE before version 9
                document.addEventListener ("click", OnDocumentClick, false);
            }
            else {
                if (document.attachEvent) {     // IE before version 9
                    document.attachEvent ('onclick', OnDocumentClick);
                }
            }
        }
    </script>
</head>
<body onload="Init ();" onclick="WriteInfo ('body')">
    Click on the button and you can see the propagation chain in the field below.
    <table onclick="WriteInfo ('table')">
        <tbody onclick="WriteInfo ('tbody')">
            <tr onclick="WriteInfo ('tr')">
                <td onclick="WriteInfo ('td')">
                    <span onclick="WriteInfo ('span')">
                        <button onclick="WriteInfo ('button');">Click on me!</button>
                    </span>
                </td>
            </tr>
        </tbody>
    </table>
    <div id="info" style="width:400px; height:200px; overflow:auto; background-color:#e0a0d0;"></div>
</body>