js jquery vue中如何阻止事件冒泡?
网友回复
先看js的,通过 e.stopPropagation()阻止事件向上冒泡,完整代码如下:
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> </head> <body> <div style="width:400px;height:100px;background:#CCC;"BfwOnclick="myfunc(event);"> <span style="margin:auto;width:200px;height:50px;background:yellow;"BfwOnclick="myfunc(event);">事件冒泡</span> </div> <script> function myfunc(e){ e.stopPropagation();//阻止点击事件向上冒泡 alert("span"); } </script> </body> </html>再看jquery的,通过 event.stopPropagation()阻止冒泡,示例代码如下:
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script> <script type="text/javascript"> $(function (){ $("body").click(function (event){ event.stopPropagation(); // 阻止事件冒泡 alert("body"); }); $("div").click(function (event){ event.stopPropagation(); // 阻止事件冒泡 alert("div"); }); $("span").click(function (event){ event.stopPropagation(); //...
点击查看剩余70%