Stop event propagation

Sometimes it’s annoying when say a checkbox has multiple actions binded to it which you are not aware of. Some parent elements may affect their child elements, thus making debugging and implementation so hard and confusing.

Well, one technique can be used is to stop the event propagation. Basically the idea is, once the child element receives the event, as usual perform the appropriate actions, then stop the event from going up the DOM tree, thus avoiding all kinds of unexpected side-effects.

In code


This will pass in the event object.

function do_something(e) {

    // do something here...

    // then stop the event propagation
    if (!e)
      e = window.event;

    if (e.cancelBubble)
      e.cancelBubble = true;
    else
      e.stopPropagation();
}

ref link: http://stackoverflow.com/questions/387736/how-to-stop-event-propagation-with-inline-onclick-attribute

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s