Rumah > Artikel > hujung hadapan web > 详细介绍Vue事件修饰符capture的使用
详细介绍Vue事件修饰符capture的使用
- 亚连asal
- 2018-06-14 15:46:412395semak imbas
capture事件修饰符的作用是给元素添加一个监听器，当元素发生冒泡时，先触发带有该修饰符的元素。这篇文章给大家介绍了Vue 事件修饰符capture 的使用，需要的朋友参考下吧
.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;
}
p {
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>
<p id="content">
<p id="obj1" v-on:click.capture="doc">
obj1
<p id="obj2" v-on:click.capture="doc">
obj2
<p id="obj3" v-on:click="doc">
obj3
<p id="obj4" v-on:click="doc">
obj4
<!--。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。点击obj4的时候，弹出的顺序为：obj1、obj2、obj4、obj3；
由于1，2有修饰符，故而先触发事件，然后就是4本身触发，最后冒泡事件。
-->
</p>
</p>
</p>
</p>
</p>
<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>上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
使用jquery+ajaxform+springboot如何实现数据更新
Atas ialah kandungan terperinci 详细介绍Vue事件修饰符capture的使用. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：vue+storejs处理获取数据Artikel seterusnya：在react-router中刷新页面出现404问题