vue.js事件修饰符(阻止冒泡默认行为)-蒲公英云

vue.js事件修饰符(阻止冒泡默认行为)

事件处理函数只有纯粹的逻辑判断，不处理DOM实践的细节，例如：阻止冒泡，默认行为，判断按键。

vue修饰符是指在触发事件或按键时额外的触发条件或回调。比如点击事件只允许触发一次，可以使用@click.once。
一.原生事件对象

vue可以通过以下方式，获取原生的事件对象。

<button @click="getEventDom($event);">getEventDom</button> <script> var vue = new Vue({ el: "#app", methods: { getEventDom: function(event) { event.preventDefault(); console.log(event); } } }); </script>

二.事件修饰符

事件修饰符是指与事件触发相关的修饰符。

(一).修饰符是由点开头的指令后缀来表示的。

.stop .prevent .capture .self .once .passive

1、事件冒泡（事件不会向上传递）按上例中原生事件对象，要组织冒泡事件需要用到.preventDefault()，然而使用事件修饰符，仅需@click.stop即可。

<div @click="say"> parent <div @click.stop="say">child</div>//阻止冒泡 </div>

2、阻止默认事件（不触发默认事件）

<a href="http://www.baidu.com" @click.prevent="say">百度</a>//阻止默认行为

3、指定元素触发（不包括子元素）

<a @click.stop.self.prevent="say" href="http://www.baidu.com" style="border: 10px s olid red"> <span>2</span> <span>1</span> </a>

4、事件捕获方式（父->子）

<div @click='say'>parent <div @click='say1'> child </div> </div>

5、绑定事件一次（触发后移除事件）

<div @click.once='say'>say</div>

6、.capture事件默认是双向的，先捕获，在冒泡

(二).注意：

使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。

（三).vue2.3 新增

Vue 还对应 addEventListener 中的 passive 选项提供了 .passive 修饰符。这个 .passive 修饰符尤其能够提升移动端的性能。

<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
<!-- 而不会等待 `onScroll` 完成  -->
<!-- 这其中包含 `event.preventDefault()` 的情况 -->
<div v-on:scroll.passive="onScroll">...</div>