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

You are here: Reference > JavaScript > client-side > event handling > methods > stopPropagation (event)

stopPropagation method (event)

Browser support:

9

Disables the propagation of the current event in the DOM hierarchy.

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, etc.

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 has 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 and 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.stopPropagation ( );

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

Return value:

This method has no return value.

Example HTML code 1:

This example illustrates the event bubbling for the onclick and onfocus 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>