<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="traceur.js"></script> <script src="BrowserSystem.js"></script> <script src="bootstrap.js"></script> <script src="vue.js"></script> </head> <script type="text/traceur"> window.onload=function(){ var app3 = new Vue({ el: '#app-3', data:{ }, methods:{ method1:function(){ console.log(1); }, method2:function(){ console.log(2); }, method3:function(){ console.log(3); }, }, components:{ }, computed:{ } }) }; </script> <style> .c1{width:300px;height:300px;background-color:blue;} .c2{width:200px;height:200px;background-color:red;} .c3{width:100px;height:100px;background-color:gray;} </style> <body> <div id="app-3" > <div @click="method1" class="c1"> 1 //点击1弹出1 <div @click.stop='method2' class="c2"> 2 //原来点击2弹出21,加了.stop后,点击2弹出2,点击3弹出32,2收到事件后不再冒泡到外层。 <div @click="method3" class="c3"> 3 //点击3弹出321 </div> </div> </div> <div @click.capture="method1" class="c1"> 11 // <div @click.capture='method2' class="c2"> 22 // 点击2弹出12 <div @click="method3" class="c3"> 33 // 点击3弹出123 </div> </div> </div> </div> </body> </html>
事件冒泡捕获
转载本文章为转载内容,我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题,欢迎原作者联系我们进行内容更正或删除文章。
提问和评论都可以,用心的回复会被更多人看到
评论
发布评论
相关文章
-
事件捕获_事件冒泡
件冒泡和事件捕获的demo了无标题文档 事件的eventPhase说明了事件执
html 父节点 子节点 -
事件冒泡和捕获
事件冒泡:有同一父元素 点击子元素 由内向外触发 事件捕获:有同一父元素,点击子元素,由外向内触发 使用场景:ul下的li 给ul绑定事件对li进行触发
html javascript 使用场景 -
事件冒泡、事件捕获和事件委托
事件冒泡(Event Bubbling)、事件捕获(Event Capturing)和
前端 javascript 事件冒泡 事件委托 点击事件 -
JS事件冒泡与捕获
什么是冒泡与捕获以click点击事件为例。假如我们
JavaScript JS 事件 冒泡 捕获 -
事件捕获,事件冒泡,事件取消
无标题文档 点击div3时,进来的点击事件(事件捕获)从1到3,出去的点击事件(事件冒泡)从3到1.每个div经历2个点击事件。 无标题文档
html 点击事件 事件触发 事件捕获 事件冒泡