JavaScript--Block default event blocking events from bubbling

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 );

JavaScript--Block default event blocking events from bubbling