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

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

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

• .stop

• .prevent

• .capture

• .self

• .once

• .native

• .passive
  …

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

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

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

...

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

...

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

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

...

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

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