微信小程序常见问题_详解Vue 工作修饰符capture 的

2021-01-11 10:53| 发布者: | 查看: |

详解Vue 事件修饰符capture 的使用       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;
 div {
 width: 100px;
 #obj1 {
 background: deeppink;
 #obj2 {
 background: pink;
 #obj3 {
 background: hotpink;
 #obj4 {
 background: #ff4225;
 /style 
 script src="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 的使用,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对凡科网站的支持!


<
>

 
QQ在线咨询
售前咨询热线
18720358503
售后服务热线
18720358503
返回顶部