鼠标事件使用
@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>
