Vue 事件修饰符.self的用法

<!-- 阻止单击事件冒泡 -->
<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 事件修饰符.self的用法相关推荐

vue事件修饰符有哪些
vue 事件修饰符 1.prevent:阻止默认事件 2.stop:阻止事件冒泡 3.once:事件只触发一次 4.capture:使用事件的捕捉模式 5.self:只有event.target是当前 ...
Vue 事件修饰符详解
本人后端程序员,由于绑页面需要使用vue,在自学的过程中不懂事件修饰符,特此请教后才理解,在这提出我的分享,忘各位大神指正. vue官网上指出: 在事件处理程序中调用 event.preventDef ...
vue学习：事件传递（冒泡和捕获），事件委托，jquery中的事件委托，$event 获取元素，vue事件修饰符
事件传递 ----冒泡和捕获 DOM事件标准定义了两种事件流,这两种事件流分别是捕获和冒泡. 和许多Web技术一样,在它们成为标准之前,Netscape和微软各自不同地实现了它们.Netscape选 ...
Vue事件修饰符的总结
分为六点: 1.prevent 阻止默认行为(常用) 2.stop 阻止事件冒泡(常用) 3.once 事件值触发一次(常用) ...
vue事件修饰符，六次实操带你快速了解与应用~
一.速识概念: 你好呀,最近过的怎么样?今天总结了vue常见的事件修饰符,学习面试都是常遇到的,快来看看吧~
Vue事件修饰符（prevent，stop，once，capture，self）
1.Vue的事件修饰符: 1.prevent 阻止默认事件(常用) 2.stop:阻止默认冒泡(常用) 3.once:事件只触发一次(常用) 4.capture:使用事件的捕获模式 5.self:只有 ...
vue 事件修饰符与按键修饰符
事件修饰符在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求.尽管我们可以在方法中轻松实现这点,但更好的方式是: ...
Vue2.0学习笔记：Vue事件修饰符的使用
事件处理如果需要在内联语句处理器中访问原生DOM事件.可以使用特殊变量$event,把它传入到methods中的方法中. 在Vue中,事件修饰符处理了许多DOM事件的细节,让我们不再需要花大量的时间 ...
Vue事件修饰符的使用
事件处理如果需要在内联语句处理器中访问原生DOM事件.可以使用特殊变量$event,把它传入到methods中的方法中. 在vue中,事件修饰符处理了许多DOM事件的细节,让我们不再需要花大量的时间 ...

Vue 事件修饰符.self的用法

Vue 事件修饰符.self的用法相关推荐

最新文章

热门文章