Vue 鼠标事件合集，关于鼠标右键的处理方法（改写鼠标右键方法、自定义鼠标右键）

鼠标事件使用

复制代码

@mousedown="canvasDown($event)"按下

事件合集

复制代码

click       点击某个对象时触发
mousedown	鼠标按钮被按下时触发
mouseup	    鼠标按钮被松开时触发
mouseleave	当鼠标指针移出元素时触发
dblclick    双击时触发
mousemove	鼠标移动时触发，持续触发
mouseout	鼠标从某元素移开时触发
mouseover	鼠标移到某元素上时触发
mouseenter	鼠标移到某元素上时触发
contextmenu 右键触发

区分说明

复制代码

mouseover   鼠标指针移入事件所绑定的元素或其子元素，都会触发该事件  
mouseenter  鼠标指针移入事件所绑定的元素时，会触发该事件

如果一个元素没有子元素 ，那么该元素绑定mouseover或者mouseenter两种事件效果没有区别，鼠标每次移入元素时都只会触发一次事件；

如果绑定了mouseover事件的元素存在子元素 ，那么，每次移入该元素时都会触发一次事件（包括从外部移入 和从子元素移入），移入子元素时也会触发一次事件。

鼠标右键事件处理

方法1 contextmenu

复制代码

    document.addEventListener("contextmenu", function (e) {
      e.preventDefault(); //阻止右键默认行为
      console.log('右键');
      // do something
    });

方法2 mousedown

复制代码

    document.addEventListener("mousedown", function (e) {
      e.preventDefault();//此时阻止右键默认行为不生效，需要用方法1禁止该默认行为
      if (e.button == 0) {
        console.log("你按下了鼠标左键!");
      } else if (e.button == 1) {
        console.log("你按下了鼠标滚轮!");
      } else {
        console.log("您按下了鼠标右键!");
      }
    });

关于鼠标右键的更多应用

复制代码

<template>
  <div>
    <div class="btn" @click.right="handleClick('1')">右键</div>
    <div class="btn" @contextmenu="handleClick('2')">右键</div>
    <div class="btn" @contextmenu.prevent="handleClick('3')">
      右键 阻止默认行为
    </div>
    <div class="btn" @contextmenu="handleClicks($event)">右键 阻止默认行为</div>
    <div class="btn" id="btn">右键 来自监听</div>
  </div>
</template>

<script>
export default {
  mounted() {
    // 指定元素添加右键监听
    document
      .getElementById("btn")
      .addEventListener("contextmenu", function (e) {
        e.preventDefault(); //阻止右键默认行为
        console.log("右键");
      });
  },
  methods: {
    handleClick(key) {
      console.log("右键", key);
    },
    handleClicks(e) {
      e.preventDefault(); //阻止右键默认行为
      console.log("右键", e);
    },
  },
};
</script>
<style scoped>
.btn {
  height: 30px;
  border: 1px solid #000;
}
</style>