Vue 事件修饰符.self的用法
2017-10-26 15:22
429 查看
<!-- 阻止单击事件冒泡 --> <a v-on:click.stop="doThis"></a> <!-- 提交事件不再重载页面 --> <form v-on:submit.prevent="onSubmit"></form> <!-- 修饰符可以串联 --> <a v-on:click.stop.prevent="doThat"></a> <!-- 只有修饰符 --> <form v-on:submit.prevent></form> <!-- 添加事件侦听器时使用事件捕获模式 --> <div v-on:click.capture="doThis">...</div> <!-- 只当事件在该元素本身 (比如不是子元素) 触发时触发回调 --> <div v-on:click.self="doThat">...</div>
关于.stop和.self的区别,前者是防止事件冒泡,后者则是忽略了事件冒泡和事件捕获的影响。只有直接作用在 该元素上的事件才会被调用,因为它看起来 与.stop好像有一点像,但其实他们作用的对象不同。一下举个简单例子。
<div id="_Red" v-on:click="doThat1(event)" style="width: 500px;height: 500px;background: red;"> <div v-on:click="doThat(event)" id="_Blue" style="width: 200px;height: 200px;background: blue;"> </div> </div>
vue 实例方法
doThat:function(e){ alert('doThat'+$(e.target).attr('id')); }, doThat1:function(e){ alert('doThat1'+$(e.target).attr('id')); }
我们把两个DIV分为blue和red,blue是red的子元素,在我没有加任何修饰符的时候,当我点击blue的时候,输出的结果是
doThat_Blue doThat1_Blue //这里要说明一下,事件冒泡除了事件触发以外传入的事件对象也是事件源的对象,并非是事件绑定的元素,因此两次输出的都是Blue而不是一次Blue一次Red
1)当给Blue加上.stop修饰符的时候,阻止了子元素的冒泡事件,所以Red并不会触发事件。
2)而如果我给Red加上.self修饰符,去掉Blue的stop修饰符的时候,点击子元素(Blue)会发现,输出doThat_Blue就不会再输出,这个结果看上去跟1)中的阻止冒泡事件是一致的,是因为.self只执行直接作用在该元素身上的事件,所以它相当于忽略了 其他元素的冒泡或者捕获事件。但是这种忽略只局限于自身。
所以,为了避免一些会被冒泡事件影响,加上修饰符.self是很有用的
相关文章推荐
- 基于vue.js中事件修饰符.self的用法(详解)
- vue事件修饰符和按键修饰符用法总结
- Vue------第四天(事件处理:事件监听、修饰符等;表单输入绑定:基础用法、值绑定)
- vue.js 中的.capture事件修饰符的用法。
- Vue.js-03:第三章 - 事件修饰符的使用
- 前端框架vue.js系列(4):事件修饰符与按键修饰符
- vue.js常用的事件修饰符
- vue-事件修饰符
- vue 事件修饰符 stop,capture,prevent
- Vue 框架-03-键盘事件、健值修饰符、双向数据绑定
- Vue 按键修饰符处理事件的方法
- 第二天(vue事件、事件修饰符,键盘事件与修饰符)
- Vue 事件修饰符 详解
- Vue.js事件修饰符解释
- vue笔记--事件修饰符
- vue事件修饰符
- 详解Vue 事件修饰符capture 的使用
- vue-事件修饰符和按键修饰符
- 从零开始学 Web 之 Vue.js(一)Vue.js概述,基本结构,指令,事件修饰符,样式
- Vue键盘事件用法总结