event.stopPropagation()S2C Home « Objects « event.stopPropagation()

Event stop propagation method.

Description

The event.stopPropagation() Event object method when called, stops current event bubbling up the DOM tree, preventing parent handler notification of the event.

  • When an event reaches an element, all handlers bound to that event type for the element are fired. If multiple handlers are registered for the element, they will always execute in the order in which they were bound. When all handlers have finished executing, the event continues along the normal event propagation path.
    • A handler can prevent the event from bubbling further up the document tree, thus preventing handlers on those elements from running, by calling the event.stopPropagation() method.
    • If other handlers are attached to the current element these will run however. This can be prevented by calling the event.stopImmediatePropagation() method.
    • To cancel any default action that the browser may have for this event, call the event.preventDefault() method.
    • Returning false from an event handler or calling an event handler with the false parameter, as an example
      ( $('aSelector').on('anEventType', false); ) will automatically call the event.stopPropagation() and event.preventDefault() methods on it.

Syntax

Signature Description
event.stopPropagation()Stops current event bubbling up the DOM tree, preventing parent handler notification of the event.

Parameters

None.

Return

None.

event.stopPropagation() ExampleTop

When called, stops current event bubbling up the DOM tree, preventing parent handler notification of the event.

In the example below we show a new message in the 'div' element with an id of 'div14' whenever the mouse is clicked within this division. If you click on the paragraph element within the division you get a message stating propogation has stopped.

We are stopping other handlers from propogating so we will never see the output from the second handler when we click on the paragraph text.



$(function(){
  $('#div14 p').one('click', function(event) {
	  event.stopPropagation();
      $('#div14').append('Has event.stopPropagation() been called on this event object? ' 
                        + event.isPropagationStopped() + '<br/ >');
  });
  $('#div14').on('click', function(event) { // Following will not execute
      $('#div14').append('We will never see this text when we click on the para text.' + '<br/ >');
  });
});

para14. Click this paragraph