Vue3 获取点击事件的event对象

5 min read
<template>
  <div>
    <img src="my-image.jpg" @click="(event) => handleClick(event, '参数1', 123)">
  </div>
</template>

在上述示例中,使用箭头函数定义了一个事件处理函数,该函数接收一个event参数和两个额外的参数,并在函数内部调用了handleClick方法并传递了这三个参数。

<template>
  <div>
    <img src="my-image.jpg" @click="handleClick">
    <p v-if="clickedPoint">{{ clickedPoint }}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      clickedPoint: null
    };
  },
  methods: {
    handleClick(event) {
      const x = event.offsetX;
      const y = event.offsetY;
      this.clickedPoint = `您点击了图片的坐标点:(${x}, ${y})`;
    }
  }
};
</script>