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