Home > Developer > Web Develop
Click event bubbling block in JS
Analytical:
A div layer ' out ' containing a div layer ' in '. As follows:
Two layers are bound to click events, but when you click on the in layer, the Click event will appear bubbling, but also trigger the out layer of click events.
But you don't want to trigger an out click event, just want to trigger a click event in the in layer, so block the bubbling event.
Workaround:
E.preventdefault ()
Case code:
<!DOCTYPE HTML><HTMLxmlns= "http://www.w3.org/1999/xhtml"><Head><Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8"/> <title>Click event bubbling Processing</title> <Scripttype= "Text/javascript"> varfun1= function(e) {alert ("I am the parent click event"); } varfun2= function(e) {e.stoppropagation (); // block Click events to bubble up Alert ("I'm a sub-click event"); } </Script></Head><Body> <Divonclick= "Fun1 (event)"style= "height:100px;background-color:black;color:white;text-align:center;border:1px solid red">parent Node<Divonclick= "Fun2 (event)"style= "margin-top:20px;border:1px solid red;height:30px">child Nodes</Div> </Div></Body></HTML>
Reference from: https://www.cnblogs.com/mdorg/p/5617408.html
http://blog.csdn.net/abb_chen/article/details/49406649
Click event bubbling block 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
