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(); // 阻止事件冒泡 alert("span"); }); }); </script> </head> <body> <div style="width:400px;height:100px;background:#CCC;"> <span style="margin:auto;width:200px;height:50px;background:yellow;" >事件冒泡</span> </div> </body> </html>最后看看vue怎么阻止事件冒泡?还是通过e.cancelBubble=true或者 v-on:click.stop=修饰符来实现,完整代码如下:
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue.2.2.min.js"></script> </head> <body> <div id="app"> <div style="width:400px;height:100px;background:#CCC;" @click="myfunc(event)"> <span style="margin:auto;width:200px;height:50px;background:yellow;" @click="myfunc(event)" >事件冒泡</span><span v-on:click.stop="myfun2">修饰符</span> </div> </div> <script> new Vue({ el: '#app', data: function() { return { message:"hello world!", score:59, } }, filters: { handleData: function (value) { if(value>=60) return '及格' else return '不及格' } }, methods:{ myfunc:function(e){ alert("click"); e.cancelBubble=true; /*阻止冒泡*/ },myfun2:function(){ alert("click2"); } }, }) </script> </body> </html>主要,ie浏览器与现代浏览器对于冒泡事件阻止不同,兼容写法如下:
function stopPropagation(event){ var e=arguments.callee.caller.arguments[0] || event;//这里是因为除了IE有event其他浏览器没有所以要做兼容 if(window.event){ //这是IE浏览器 e.cancelBubble=true; }else if(e && e.stopPropagation){ //这是其他浏览器 e.stopPropagation();//阻止冒泡事件 } } <buttonBfwOnclick="stopPropagation(event)"> 按钮 </button> // 使用