vue 的事件修饰符 capture 到底怎么回事?

chaihongjun
  • 302
<div id="app">
<div @click="btn0" style=" width:300px;height:300px; border:1px solid red;background:#606060">0
<div @click.capture="btn1" style=" width:200px;height:200px; border:1px solid red;background:#CCC">1
<div @click="btn2" style=" width:100px;height:100px; border:1px solid red;background:#f5f5f5">2
  <button @click="btn3">3</button>
</div>
</div>
</div>
   </div>
<script src="https://cn.vuejs.org/js/vue.min.js"></script>
<script>
let vm=new Vue({
el:'#app',
   data:[],
    methods:{
        btn0(){
          alert('btn0')
           },
        btn1:function(){
            alert('btn1')
        },
        btn2:function(){
            alert('btn2')
        },
 btn3:function(){
            alert('btn3')
        }
    },
})
</script>

点击按钮之后事件触发的顺序
btn1->btn3->btn2->btn0
如果把 capture放在 btn2上面,则事件触发的顺序变成了:
btn2->btn3->btn1->btn0

最后总结的优先级规律是:

  1. 设置了capture的
  2. 真正被点击的
  3. 结束了capture之后,依照冒泡顺序
  4. 已经出发的事件(capture),在冒泡阶段会忽略不再触发

这个结论对不对,为什么会这样?

回复
阅读 1.1k
2 个回答

DOM事件模型有三个阶段:捕获、目标、冒泡。

捕获是自上而下的,就是从window对象到祖先元素,最后到元素本身,而冒泡相反,是自下而上的。

一般我们绑定事件可以使用dom.addEventListener(etype, fn, capture),第三个元素capture就是决定事件在哪个阶段执行,capture设置为true,在捕获阶段执行,capture设置为false,在冒泡阶段执行,这也是默认的。

所以正常情况下,事件是从下往上的触发,即btn3->btn2->btn1->btn0,但是你在哪个事件上设置capture后,就会把这个事件的触发提升到捕获阶段,这也就早于其他事件的执行了。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏