记录备忘:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button onclick="mouse1()">onclick 左键单击事件</button>
<button oncontextmenu="mouse1()">oncontextmenu 右键单击事件</button>
<button onDblClick="mouse1()">onDblClick 双击事件</button>
<button onMouseDown="mouse1()">onMouseDown 鼠标按下</button>
<button onMouseUp="mouse1()">onMouseUp 鼠标松开</button>
<button onmouseover="mouse1()">onmouseover 当鼠标移动到目标元素时触发,到其后代元素上时 也 !会触发</button>
<button onmouseenter="mouse1()">onmouseenter 当鼠标移动到目标元素时触发,到其后代元素上时 不! 会触发</button>
<button onmouseout="mouse1()">onmouseout 鼠标离开目标元素</button>
<button onmouseleave="mouse1()">onmouseleave 鼠标离开目标元素</button>
<button onmousemove="mouse1()">onmousemove 鼠标移动</button>
<br>
<div onclick="mouse1()">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium id iste minima modi molestiae necessitatibus, quibusdam quod recusandae, soluta ut, vel veritatis voluptatibus! Asperiores, quae, vero! Fugit itaque iusto natus.
</div>
<br>
<div>
<p>测试浏览器: Chrome && IE11 </p>
鼠标按键值:
event.x 鼠标x横轴坐标
event.y 鼠标y纵轴坐标
<br>
<!--对于0 这个值对应的按键网上查到有好几种,个人在Chrome 和 IE11 下测试的时候都是 左键-->
event.button == 0 默认 / 左键
event.button == 1 左键
event.button == 2 右键
一般就使用这几个键了, 其他的几乎特别的少用,方法写在 script 里了,有需要可以测试,
另外附一个网上搜到的数据:
鼠标键值
events.button=0 默认,没有按任何按钮。
events.button=1 鼠标左键
events.button=2 鼠标右键
events.button=3 鼠标左右键同时按下
events.button=4 鼠标中键
events.button=5 鼠标左键和中键同时按下
events.button=6 鼠标右键和中键同时按下
events.button=7 所有三个键都按下
</div>
<script>
function mouse1() {
console.log(event.button);
}
</script>
</body>
</html>