Vue 事件修饰符 如何解决/处理点击事件无法触发

在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在 methods 中轻松实现这点，但更好的方式是：methods 只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。

为了解决这个问题， Vue.js 为 v-on 提供了 事件修饰符。通过由点(.)表示的指令后缀来调用修饰符。常见的事件修饰符如下：

• .stop

• .prevent

• .capture

• .self

• .once

• .native

• .passive
  …

• .stop 阻止冒泡（指阻止事件向上级DOM元素传递，比较常用）

 <!-- 阻止单击事件冒泡 -->

<a v-on:click.stop = "doThis"></a>

• .prevent 阻止事件的默认行为（指对DOM的操作会引起自动执行的动作，比如点击超链接的时候会进行页面的跳转，点击表单提交按钮时会重新加载页面等）

<!-- 修饰符可以串联 -->

<a v-on:click.stop.prevent = "doThat"></a>


<!-- 提交事件不再重载页面 -->

<form v-on:submit.prevent = "onSubmit"></form>


<!-- 只有修饰符 -->

<form v-on:submit.prevent></form>

• .capture 捕获冒泡（即有冒泡发生时，有该修饰符的dom元素会先执行，如果有多个，从外到内依次执行，然后再按自然顺序执行触发的事件）

<!-- 添加事件侦听器时使用事件捕获模式 -->

<div v-on:click.capture  = "doThis">...</div>

• .self 将事件绑定到自身，只有自身才能触发（通常用于避免冒泡事件的影响）

<!-- 只当事件在该元素本身（比如不是子元素）触发时触发回调 -->

<div v-on:click.self = "doThat">...</div>

• .once 设置事件只能触发一次，比如按钮的点击等。

<!-- 提交事件只触发一次，不做重复提交 -->

<form v-on:submit.once	= "onSubmit"></form>

• .native 在父组件中给子组件绑定一个原生的事件，就将子组件变成了普通的HTML标签，不加’. native’事件是无法触 发的。

<!--可以理解为该修饰符的作用就是把一个vue组件转化为一个普通的HTML标签，并且该修饰符对普通HTML标签是没有任何作用的。-->

<div v-on:click.native	= "doThis">...</div>

• .passive 该修饰符大概意思用于对DOM的默认事件进行性能优化，根据官网的例子比如超出最大范围的滚动条滚动的。

注意：使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 @click.prevent.self 会阻止所有的点击，而 @click.self.prevent 只会阻止元素上的点击。