Home > Developer > Web Develop
First, explain the difference between the two methods of Preventdefault and Stoppropagation in JS:
What role does the Preventdefault method play?
We know for example <a href= "http://www.baidu.com" > Baidu </a>, this is the most basic HTML things, the role is to click Baidu Link to http://www.baidu.com, which belongs to The default behavior of the <a> tag, and the Preventdefault method is to prevent its default behavior from occurring and other things happen. Look at a piece of code and you'll understand.
<!DOCTYPE HTML Public "-//W3C//DTD XHTML 1.0 transitional//en" "http://www.w3.org/TR/xhtml1/DTD/ Xhtml1-transitional.dtd "><HTMLxmlns= "http://www.w3.org/1999/xhtml"><Head> <Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8" /> <title>JS Block link Jump</title> <Scripttype= "Text/javascript"> functionStopdefault (e) {if(e&&E.preventdefault) E.preventdefault (); ElseWindow.event.returnValue= false; return false; } </Script></Head><Body> <ahref= "Http://www.baidu.com"ID= "Testlink">Baidu</a> <Scripttype= "Text/javascript"> varTest=document.getElementById ('Testlink'); Test.onclick= function(e) {alert ('My link address is:' + This. href+ ', but I won't jump. '); Stopdefault (e); } </Script></Body></HTML>
Preventdefault method to explain here, Stoppropagation method?
Before speaking stoppropagation method, we must first explain the JS event agent.
The event agent uses two features that are often ignored in the Javasciprt event: event bubbling and the target element. When an event on an element is triggered, such as a mouse click on a button, the same event will be triggered in all ancestor elements of that element. This process is known as event bubbling, which bubbles to the top of the DOM tree from the beginning of the original element. For any event, the target element is the original element, which is the button in our example. The target element it appears as an attribute in our event object. With the event agent, we can add an event handler to an element, wait for the event to bubble up from its child elements, and easily determine which element the event starts with.
Stoppropagation method is to prevent the role of the JS event bubbling, see a piece of code.
Copy CodeThe code is as follows:<!DOCTYPE HTML Public "-//W3C//DTD XHTML 1.0 transitional//en" "http://www.w3.org/TR/xHTML1/DTD/ Xhtml1-transitional.dtd "><HTMLxmlns= "Http://www.w3.org/1999/xHTML"Lang= "gb2312"><Head> <title>Block JS event bubbling Pass (cancelbubble, stoppropagation)</title> <Metaname= "keywords"content= "JS, event bubbling, cancelbubble,stoppropagation" /> <Script> functiondosomething (obj, evt) {alert (obj.id); vare=(EVT)?evt:window.event; if(window.event) {e.cancelbubble= true; //stop Bubbling Under IE } Else { //E.preventdefault ();e.stoppropagation ();//block Bubbling under other browsers } } </Script></Head><Body> <DivID= "Parent1"onclick= "alert (this.id)"style= "width:250px; Background-color:yellow"> <P>This is parent1 Div.</P> <DivID= "Child1"onclick= "alert (this.id)"style= "width:200px; Background-color:orange"> <P>This is child1.</P> </Div> <P>This is parent1 Div.</P> </Div> <BR/> <DivID= "Parent2"onclick= "alert (this.id)"style= "width:250px;"> <P>This is parent2 Div.</P> <DivID= "Child2"onclick= "dosomething (this,event);"style= "width:200px;"> <P>This is child2. Would bubble.</P> </Div> <P>This is parent2 Div.</P> </Div></Body></HTML>
Preventdefault and stoppropagation in
JS
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
