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>