How jquery prevents elements from bubbling with the same type of event

Today, a problem is encountered, the same element in the component is bound to multiple identical events, a, a, a callback function in the A event returns a Boolean type value, if True then continue, if False then return directly;

So let's look at a few ways to block events in an event object:

1. Event.preventdefault (); --Block The default event for an element.
Note: The click of a element to jump to the default event,

Default events for form elements such as Button,radio,

div element has no default event

Cases:

<href= "http://www.baidu.com"  target= "_black"> Baidu </a>

var samp = Document.getelementbytagname ("a"); Samp.addeventlistener ("Click", Function (e) {e.preventdefault ()},false) ;

Explanation: Click the link when the normal situation will happen to jump, but now we have blocked its default event, that is, jump event, then will not jump to Baidu.

2. Event.stoppropagation (); --block element bubbling events

Note: Nested elements typically have bubbling events that can have some impact

Cases:

<DivID= "C1"onclick= "alert (1)"><DivID= "C2"Onlick= "alert (2)"><inputtype= "button"ID= "C3"value= "Tap"onclick= "alert (3)"></Div></Div>

Click on the button here, the browser will pop up 3,2,1, originally just want to bind to the button on the event, but inadvertently triggered its two parents on the event, here we just did a simple test, imagine if in the project development, A button and his parent bind a very important event at the same time, and the result will be miserable. The way to do this is to stop the bubbling event.

Registers the Click event with input and blocks its bubbling event

document.getElementById (' C3 '). AddEventListener (' click ', Function (e) {e.stoppropagation ()},false);

3:event.stopimmediatepropagation ()--block the same type of event overlay with the same element

The above method can only block event bubbling (that is, the same type of event for the parent element), but cannot prevent the event from appending (the same type of event for the same element).

$ (function() {      $ ("#green"). Click (function(event) {          Event.stopimmediatepropagation ();          Alert ("green click");      $ ("#green"). Click (function() {          alert ("Green Click2");      }   );

Explanation: Two click events were bound to the element in the code, via Event.stopimmediatepropagation (); To prevent the next click event from being triggered, event.stopimmediatepropagation () will not only block the green Click2 event, but also block the event from bubbling.

So, I realized the task demand through Event.stopimmediatepropagation ().

How jquery prevents elements from bubbling with the same type of event