Vue事件修饰符（stop、prevent和once）

在原生 DOM 事件处理中，我们可以在事件监听回调函数中通过 event.preventDefault 来阻止事件默认行为，还可以通过 event.stopPropagation 来停止事件冒泡。

Vue 设计了简洁的事件修饰符语法来实现对事件的这两种操作及其他操作。

事件修饰符是用点表示的事件指令后缀，比如“@事件名.事件修饰符=handler”。常用的事件修饰符有下面几个：

.stop：停止事件冒泡。
.prevent：阻止事件默认行为。
.once：事件只处理一次。

下面通过案例来演示常用事件修饰符的使用方法，Vue 代码如下：

<div id="app">
  <a href="http://www.baidu.com" @click.prevent="test1">去百度</a>
  <br>
  <br>
  <div style="width:200px;height:200px;background: yellow;" @click="test2">
    outer
    <div style="width:100px;height:100px;background:green;" @click.stop="test3">inner</div>
  </div>
  <br>
  <br>
  <button @click.once="test4">只有应一次点击</button>
</div>

JavaScript 代码如下：

const { createApp } = Vue

createApp({
  data () {
    return {
      num: 2
    }
  },
  methods: {
    test1 () {
      alert('响应点击链接')
    },
    test2 () {
      alert('点击outer')
    },
    test3 () {
      alert('点击inner')
    },
    test4 () {
      alert('响应点击')
    }
  }
}).mount('#app')

在通常情况下，点击链接默认会跳转页面，而上方代码通过“.prevent”事件修饰符阻止事件默认行为，最终就不会跳转页面了。

我们在外部 div 和内部 div 上都绑定了点击事件。当点击内部 div 的绿色区域时，默认内部 div 会响应，但是由于事件冒泡，因此外部 div 也会响应。而上方代码通过“.stop”事件修饰符停止事件冒泡，外部 div 就不会响应了。

因为上方代码为按钮指定了“.once”事件修饰符，所以点击按钮时，其只会响应一次。

Vue事件修饰符（stop、prevent和once）

相关文章