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