mouse事件（鼠标事件）- JavaScript事件处理
mouse（鼠标）事件主要是操作鼠标所触发的事件，如单击、双击、鼠标离开等。由于在Windows系统中鼠标是最主要的定位设置，所以鼠标事件是Web开发中最常用的一类事件。
请注意：此类事件不仅可能来自于“鼠标设备”，还可能来自于对此类操作进行了模拟以实现兼容性的其他设备，例如手机和平板电脑。
1、鼠标事件
click：当用户单击某个对象或按(Enter)键时触发
contextmenu ：当用户右击某个对象时触发
dblclick：当用户双击某个对象时触发
mouseover：当鼠标指针位于一个元素外部，然后用户首次移动到另一个元素上时触发
mouseout：当鼠标指针从某元素移开到另外一个元素时触发
mousedown：当用户按下任意鼠标按钮时触发
mousemove：当鼠标指针在元素的内部移动时触发
mouseup：在用户释放鼠标按键时触发
mouseenter：当鼠标指针从元素外部首次移动到元素范围内时触发，不冒泡
mouseleave：当鼠标指针从元素上方移到元素范围之外时触发，不冒泡
mousewheel：鼠标滚轮滚动时触发
2、鼠标按键状态
大多数鼠标设备只有左键和右键，对应的值就是 0 和 2。触屏设备中的点按操作也会触发类似的事件。
鼠标按键状态 event.button
左键 (主要按键) 0
中键 (辅助按键) 1
右键 (次要按键) 2
X1 键 (后退按键) 3
X2 键 (前进按键) 4
案例1
功能包含鼠标事件和按钮状态
<!DOCTYPE html>
<html lang="zh-Hans">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>鼠标按钮</title>
<script>
function logMouse(e) {
let evt = e.type;
while (evt.length < 11) evt += ' ';
showmesg(evt + " button=" + e.button, 'test')
return false;
}
let timer = 0;
function showmesg(t, form) {
if (timer == 0) {
timer = new Date();
}
let tm = new Date();
if (tm - timer > 300) {
t = '------------------------------\n' + t;
}
let area = document.forms[form + 'form'].getElementsByTagName('textarea')[0];
area.value += t + '\n';
area.scrollTop = area.scrollHeight;
timer = tm;
}
function logClear(form) {
timer = 0;
document.forms[form + 'form'].getElementsByTagName('textarea')[0].value = '';
lines = 0;
}
function myFunction() {
document.getElementById("p1").innerHTML = "Hello World";
}
function bigImg(x) {
x.style.background = "yellow";
}
function normalImg(x) {
x.style.background = "";
}
</script>
</head>
<body>
<input onmousedown="return logMouse(event)" onmouseup="return logMouse(event)" onclick="return logMouse(event)"
oncontextmenu="return logMouse(event)" ondblclick="return logMouse(event)" value="使用鼠标上的任意按钮点击我" type="button">
<input onclick="logClear('test')" value="清空" type="button">
<hr>
<form id="testform" name="testform" >
<textarea style="font-size:12px;height:550px;width:360px;" onmouseover="bigImg(this)" onmouseout="normalImg(this)"></textarea>
</form>
<p ondblclick="myFunction()">双击本文字触发一个函数，在本段文字下面显示Hello World</p>
<p id="p1"></p>
</body>
</html>3、组合键
shift，alt，ctrl，meta
所有的鼠标事件都包含有关按下的组合键的信息。
事件属性：
shiftKey：Shift
altKey：Alt（或对于 Mac 是 Opt）
ctrlKey：Ctrl
metaKey：对于 Mac 是 Cmd
如果在事件期间按下了相应的键，则它们为 true。
案例：仅在 Alt+Shift+click 时才有效
<button id="button">按住 Alt+Shift+Click 后点我!</button>
<script>
button.onclick = function(event) {
if (event.altKey && event.shiftKey) {
alert('点我干嘛!');
}
};
</script>4、坐标
所有的鼠标事件都提供了两种形式的坐标：
相对于窗口的坐标：clientX 和 clientY。
相对于文档的坐标：pageX 和 pageY。
<!DOCTYPE html>
<html lang="zh-Hans">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>鼠标坐标</title>
<link rel="stylesheet" href="https://www.ytwes.com/assets/css/case.min.css">
</head>
<body>
<h1>鼠标坐标演示</h1>
<p>所有的鼠标事件都提供了两种形式的坐标：</p>
<p>相对于窗口的坐标：clientX 和 clientY。</p>
<p>相对于文档的坐标：pageX 和 pageY。</p>
<div class="event-log"></div>
<script>
const eventLog = document.querySelector('.event-log');
function logEvent(message) {
const entry = document.createElement('div');
entry.textContent = message;
eventLog.appendChild(entry);
eventLog.scrollTop = eventLog.scrollHeight;
}
window.addEventListener('click', function (e) {
const x = e.clientX;
const y = e.clientY;
const pageX = e.pageX;
const pageY = e.pageY;
logEvent(`坐标位置（相对于窗口）： clientX=${x}, clientY=${y}`);
logEvent(`坐标位置（相对于文档）： pageX=${pageX}, pageY=${pageY}`);
});
</script>
</body>
</html>文档如有描述不清楚、错误或者过时的地方，欢迎留言指出。
文档、教程内容会不定时更新，转载请标明原帖链接，以免让过时的教程流入网络。