.capture事件修饰符的作用添加事件侦听器时使用事件捕获模式
即是给元素添加一个监听器，当元素发生冒泡时，先触发带有该修饰符的元素。若有多个该修饰符，则由外而内触发。
就是谁有该事件修饰符，就先触发谁。
代码如下：
<!DOCTYPE html>
<html lang=\"en\">
<head>
<meta charset=\"UTF-8\">
<title>.capture事件修饰符</title>
<style type=\"text/css\">
* {
margin: 0 auto;
text-align: center;
line-height: 40px;
}
div {
width: 100px;
}
#obj1 {
background: deeppink;
}
#obj2 {
background: pink;
}
#obj3 {
background: hotpink;
}
#obj4 {
background: #ff4225;
}
</style>
<script src=\"https://cdn.bootcss.com/vue/2.4.2/vue.min.js\"></script>
</head>
<body>
<div id=\"content\">
<div id=\"obj1\" v-on:click.capture=\"doc\">
obj1
<div id=\"obj2\" v-on:click.capture=\"doc\">
obj2
<div id=\"obj3\" v-on:click=\"doc\">
obj3
<div id=\"obj4\" v-on:click=\"doc\">
obj4
<!--。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。点击obj4的时候，弹出的顺序为：obj1、obj2、obj4、obj3；
由于1，2有修饰符，故而先触发事件，然后就是4本身触发，最后冒泡事件。
-->
</div>
</div>
</div>
</div>
</div>
<script type=\"text/javascript\">
var content = new Vue({
el: \"#content\",
data: {
id: \'\'
},
methods: {
doc: function () {
this.id = event.currentTarget.id;
alert(this.id)
}
}
})
</script>
</body>
</html>
以上所述是小编给大家介绍的Vue 事件修饰符capture 的使用，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！
© 版权声明
THE END
暂无评论内容