Home > Developer > Web Develop
There are two types of events: Listener events and browser default behavior events for special tag elements.
Listener Events: Event actions that are monitored on a node, such as the Change event for a select node, the click event of a node.
Default Browser events: features on specific page elements, such as href jumps on a tag, submit events for the form.
The default behavior of the browser can be blocked in the Listener event function, since the browser default event is in the preceding event.
Zone : Preventdefault () block browser default event stoppropagation () block event bubbling return false; block any subsequent behavior
1 <!DOCTYPE HTML>2 <HTML>3 <Head>4 <Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8" />5 <title></title>6 <Scripttype= "Text/javascript">7 //Preventdefault, such as <a href= ' http://www.baidu.com ' > Baidu </a>,preventdefault's role is to prevent its default behavior8 functionStoptdefault (e) {9 if(e&&E.preventdefault) {Ten E.preventdefault (); One } A Else{ - Window.event.returnValue=false; - } the return false; - } - window.onload=function(){ - varTest=document.getElementById ("Testlink"); + Test.onclick=function(e) { - Alert ("My connection address is:"+ This. href+', but I don't jump'); + Stoptdefault (e); A } at } - //stoppropagation Block JS event bubbling - - window.onload=function(){ - varParent1=document.getElementById ("Parent1"); - varChildrent1=document.getElementById ("Childrent1"); in Parent1.onclick=function(){ - alert (parent1.id) to }; + Childrent1.onclick=function(){ - alert (childrent1.id) the }; * } $ functionStoppro (obj,evt) {Panax Notoginseng vare=(EVT)?evt:window.event; - if(window.event) { the e.cancelbubble=true;//block Bubbling under IE + } A Else{ the e.stoppropagation ();//block Bubbling under other browsers + } - } $ window.onload=function(){ $ varParent2=document.getElementById ("Parent2"); - varChildrent2=document.getElementById ("Childrent2"); - Parent2.onclick=function(){ the alert (parent2.id) - };Wuyi Childrent2.onclick=function(e) { the Stoppro ( This, e); - alert (childrent2.id) Wu }; - } About </Script> $ </Head> - <Body> - <ahref= "Http://www.baidu.com"ID= "Testlink">Baidu</a> - <BR/> A <DivID= "Parent1"style= "Width:250px;background-color:yellow"> + <P>This is Parent1 div.</P> the <DivID= "Childrent1"style= "Width:200px;background-color:orange"> - <P>This is Chilren1.</P> $ </Div> the </Div> the <BR/> the <DivID= "Parent2"style= "Width:250px;background-color:cyan;"> the <P>This is Parent2 div.</P> - <DivID= "Childrent2"style= "Width:200px;background-color:lightblue;"> in <P>This is Childrent2. Would bubble.</P> the </Div> the </Div> About </Body> the </HTML>
JS Preventdefault, stoppropagation, return False
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
