Vue3 的 click 事件中如何获取 event？

2024-01-15 05:42:54

点击事件是前端开发中最常用的事件之一，它可以让我们在用户点击元素时执行特定的操作。在 Vue3 中，我们可以通过 @click 指令来监听元素的点击事件，并在方法中处理该事件。

然而，在某些情况下，我们可能需要在方法中访问 click 事件的 event 对象，以便获取有关点击事件的详细信息，如鼠标位置、点击的元素等。但是，如果我们在方法中直接使用 event，可能会遇到 event 未定义的错误。

这是因为在 Vue3 中，event 对象并不是默认传递给方法的。我们需要显式地将 event 对象作为参数传递给方法，才能在方法中访问它。

有两种方法可以将 event 对象传递给方法：

在方法中添加 event 参数：

<template>
  <button @click="handleClick">点击我</button>
</template>

<script>
export default {
  methods: {
    handleClick(event) {
      console.log(event);
    }
  }
}
</script>

在 @click 指令中使用箭头函数：

<template>
  <button @click="(event) => handleClick(event)">点击我</button>
</template>

<script>
export default {
  methods: {
    handleClick(event) {
      console.log(event);
    }
  }
}
</script>

这两种方法都可以将 event 对象传递给方法，让我们可以在方法中访问它。

除了上述两种方法外，我们还可以使用修饰符来简化 event 对象的传递。例如，我们可以使用 .stop 修饰符来阻止事件的传播，或者使用 .prevent 修饰符来阻止默认行为。

<template>
  <button @click.stop="handleClick">点击我</button>
</template>

<script>
export default {
  methods: {
    handleClick(event) {
      console.log(event);
      event.stopPropagation();
    }
  }
}
</script>

<template>
  <button @click.prevent="handleClick">点击我</button>
</template>

<script>
export default {
  methods: {
    handleClick(event) {
      console.log(event);
      event.preventDefault();
    }
  }
}
</script>