当前位置：首页 > VUE

vue实现点击左键事件

2026-02-21 23:52:45VUE

在Vue中实现点击左键事件

Vue中可以通过v-on指令或@简写来监听DOM事件，包括鼠标左键点击。以下是几种常见实现方式：

基础用法

在模板中直接使用@click绑定方法：

vue实现点击左键事件

<template>
  <button @click="handleLeftClick">点击我（左键）</button>
</template>

<script>
export default {
  methods: {
    handleLeftClick() {
      console.log('左键点击触发');
    }
  }
}
</script>

区分鼠标按键

需要监听mousedown或mouseup事件，通过事件对象的button属性判断按键（左键值为0）：

vue实现点击左键事件

<template>
  <div @mousedown="handleMouseDown">按住鼠标测试</div>
</template>

<script>
export default {
  methods: {
    handleMouseDown(event) {
      if (event.button === 0) {
        console.log('左键按下');
      }
    }
  }
}
</script>

事件修饰符

使用.left修饰符（Vue 2.2.0+）直接限定左键：

<template>
  <div @mousedown.left="leftClickOnly">仅响应左键</div>
</template>

<script>
export default {
  methods: {
    leftClickOnly() {
      console.log('修饰符确保只有左键触发');
    }
  }
}
</script>

动态绑定事件

通过v-on动态绑定事件名：

<template>
  <div v-on="eventListeners">动态事件绑定</div>
</template>

<script>
export default {
  data() {
    return {
      eventListeners: {
        click: this.handleClick,
        mousedown: this.handleMouseDown
      }
    }
  },
  methods: {
    handleClick() {
      console.log('点击事件');
    },
    handleMouseDown(event) {
      if (event.button === 0) {
        console.log('动态绑定的左键事件');
      }
    }
  }
}
</script>

注意事项

移动端没有左右键区分，click事件在移动端会统一触发
如果使用右键菜单，需要配合@contextmenu.prevent阻止默认行为
事件修饰符.left仅适用于click事件，不适用于mousedown/mouseup

完整示例

<template>
  <div>
    <button @click.left="logLeftClick">左键点击</button>
    <div 
      @mousedown="checkButton"
      @contextmenu.prevent
    >右键不会触发菜单</div>
  </div>
</template>

<script>
export default {
  methods: {
    logLeftClick() {
      console.log('左键点击事件');
    },
    checkButton(event) {
      if (event.button === 0) {
        alert('左键按下');
      }
    }
  }
}
</script>