Home > Developer > Web Develop
Native JS block event bubbling Code instance:
about what is event bubbling here is not much to introduce, you can refer to the JavaScript event bubbling A brief introduction to a chapter, any phenomenon is a double-edged sword, sometimes using event bubbling can bring convenience, but sometimes it can cause inconvenience, Here's an example of how to block event bubbling.
The code example is as follows:
<!DOCTYPE HTML><HTML><Head><MetaCharSet= "Utf-8"><Metaname= "Author"content= "http://www.softwhy.com/" /><title>Ant Tribe</title><Scripttype= "Text/javascript">window.onload=function(){ varBT=document.getElementById ("BT"); varMain=document.getElementById ("Main"); Bt.onclick=function() {alert ("Button Event triggered! ");} Main.onclick=function() {alert ("Div Event triggered! ");}}</Script></Head>[/size][size=2]<Body><DivID= "Main"> <inputtype= "button"ID= "BT"value= "View Effect"/></Div></Body></HTML>
The above Code click button will trigger the event to register itself in it, also by passing the event to his parent element, the code is modified as follows:
<!DOCTYPE HTML><HTML><Head><MetaCharSet= "Utf-8"><Metaname= "Author"content= "http://www.softwhy.com/" /><title>Ant Tribe</title><Scripttype= "Text/javascript">functionstopbubble (e) {if(e&&e.stoppropagation) {e.stoppropagation (); } Else{window.event.cancelBubble=true; }} window.onload=function(){ varBT=document.getElementById ("BT"); varMain=document.getElementById ("Main"); Bt.onclick=function(EV) {varEV=EV||window.event; Alert ("Button Event triggered! "); Stopbubble (EV)} Main.onclick=function() {alert ("Div Event triggered! ");}}</Script></Head>[/size][size=2]<Body><DivID= "Main"> <inputtype= "button"ID= "BT"value= "View Effect"/></Div></Body></HTML>
The above code can prevent the event bubbling phenomenon, the code is relatively simple here is not more introduced, you can see the relevant reading.
Related reading:
1.var ev=ev| | Window.event can refer to var ev=window.event| | What is the role of EV as a chapter.
The 2.stopPropagation () function can be found in the Stoppropagation () method section of JavaScript .
The 3.cancelBubble properties can be found in the Cancelbubble event Properties section of JavaScript .
The original address is: http://www.softwhy.com/forum.php?mod=viewthread&tid=11719
For more information, refer to: http://www.softwhy.com/javascript/
Native JS block event bubbling Code instance
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
