今天我们来学习 JavaScript 中的基本鼠标事件及其属性,包括9个鼠标事件和一些有用的事件对象的属性。
Mouse 鼠标事件介绍
当我们使用鼠标与页面上的元素进行交互时就会触发鼠标事件,DOM 3级定义了九个鼠标事件。
mousedown
, mouseup
和 click
当我们点击一个元素时,会按照下面顺序触发至少3个鼠标事件
- 当我们在元素上按下鼠标时,
mousedown
会触发 - 当我们在元素上松开鼠标时,
mouseup
会触发。 - 当元素触发了一个
mousedown
和一个mouseup
,就会触发click
事件
如果在元素上按下鼠标并将鼠标移开该元素,然后松开鼠标,那么mousedown
事件会触发。
同样,如果按下鼠标,然后将鼠标移动到元素上,然后松开鼠标,则元素将触发唯一的 mouseup
事件。
在这两种情况下,click
事件都不会触发。
dblclick
在实际项目中,很少会用到 dblclick
事件,dblclick
事件会在双击一个元素时触发。
触发 dblclick
事件需要两个点击事件,将按以下顺序触发事件:
mousedown
mouseup
click
mousedown
mouseup
click
dblclick
从上面的顺序可以看到,click
事件总是在 dblclick
事件之前触发。
mousemove
当我们在元素周围移动鼠标光标时,mousemove
事件会重复触发。哪怕只移动一个像素,mousemove
事件仍然会触发。它会导致页面变慢,因此,仅在需要时才去监听 mousemove
事件,并在不再使用时立即删除该事件,如下:
element.onmousemove = mouseMoveEventHandler;
// ...
// 不再使用, 清除事件处理程序
element.onmousemove = null;
mouseover
/ mouseout
mouseover
在鼠标光标位于元素外然后移动到元素内时触发。
mouseout
在鼠标光标悬停在一个元素上然后移动另一个元素时触发。
mouseenter
/ mouseleave
mouseenter
在鼠标光标位于元素外部时触发,然后移动到元素内部。
mouseleave
在鼠标光标悬停在元素上时触发,然后移动到元素的外部。
mouseenter
和 mouseleave
都不会冒泡,也不会在鼠标光标移动到后代元素上时触发。
监听鼠标事件
要监听鼠标事件:
- 首先,使用
querySelector()
或getElementById()
方法选择元素。 - 然后,使用
addEventListener()
方法来绑定鼠标事件。
比如为下面的按钮来绑定事件:
<button id="btn">点我点我!</button>
<script>
let btn = document.querySelector('#btn');
btn.addEventListener('click',(event) => {
console.log('点击了');
});
</script>
同样也可以使用DOM属性绑定事件处理程序
let btn = document.querySelector('#btn');
btn.onclick = (event) => {
console.log('点击了');
};
在一些老项目中,也会直接在HTML属性上绑定事件处理程序
<button id="btn" onclick="console.log('点击了')">点我点我!</button>
最佳实践是我们要使用addEventListener()
方法来绑定事件
检测鼠标按钮
鼠标事件处理程序的事件对象有一个 button
属性,它表示在鼠标上按下哪个鼠标按钮来触发事件。
鼠标按钮由一个数字表示:
- 0:按下鼠标左键。
- 1:按下中键或滚轮键。
- 2:按下右键。
- 3:按下第四个按钮,通常是浏览器返回按钮。
- 4:按下第五个按钮,通常是浏览器前进按钮。
看下面的例子:
<!DOCTYPE html>
<html>
<head>
<title>JS Mouse事件例子</title>
</head>
<body>
<button id="btn">用任何鼠标按钮单击我,左、中、右键。</button>
<p id="message"></p>
<script>
let btn = document.querySelector('#btn');
// 点击鼠标右键时禁用上下文菜单
btn.addEventListener('contextmenu', (e) => {
e.preventDefault();
});
// 展示鼠标事件的信息
btn.addEventListener('mouseup', (e) => {
let msg = document.querySelector('#message');
switch (e.button) {
case 0:
msg.textContent = '左键点击.';
break;
case 1:
msg.textContent = '中键点击.';
break;
case 2:
msg.textContent = '右键点击.';
break;
default:
msg.textContent = `未找到button代码: ${event.button}`;
}
});
</script>
</body>
</html>
修饰键
当点击一个元素时,我们可以按下一个或多个修饰键:Shift、Ctrl、Alt 或 Meta。
Meta 键是 Windows 键盘上的 Windows
键或者 Mac 键盘上的Command
键。
要检测这些修饰键是否被按下,可以使用鼠标事件处理程序的事件对象。
事件对象有四个布尔属性,如果指定键被按下,那么属性就会为 true,如果键没有被按下,则设置为 false。
看下面的例子:
<!DOCTYPE html>
<html>
<head>
<title>JS 修饰键例子</title>
</head>
<body>
<button id="btnKeys">按住 Alt、Shift、Ctrl 键点击我</button>
<p id="messageKeys"></p>
<script>
let btnKeys = document.querySelector('#btnKeys');
btnKeys.addEventListener('click', (e) => {
let keys = [];
if (e.shiftKey) keys.push('shift');
if (e.ctrlKey) keys.push('ctrl');
if (e.altKey) keys.push('alt');
if (e.metaKey) keys.push('meta');
let msg = document.querySelector('#messageKeys');
msg.textContent = `修饰键: ${keys.join('+')}`;
});
</script>
</body>
</html>
获取屏幕坐标
鼠标事件的事件对象的screenX
和screenY
属性返回鼠标位置相对于整个屏幕的屏幕坐标。
clientX
和clientY
属性返回浏览器中鼠标事件发生处的水平和垂直坐标:
看下面的例子:
<!DOCTYPE html>
<html>
<head>
<title>JS 获取屏幕坐标</title>
<style>
#track {
background-color: goldenrod;
height: 200px;
width: 400px;
}
</style>
</head>
<body>
<p>移动鼠标查看其位置</p>
<div id="track"></div>
<p id="log"></p>
<script>
let track = document.querySelector('#track');
track.addEventListener('mousemove', (e) => {
let log = document.querySelector('#log');
log.innerText = `
Screen X/Y: (${e.screenX}, ${e.screenY})
Client X/Y: (${e.clientX}, ${e.clientY})`
});
</script>
</body>
</html>
总结
- DOM 3级 定义了九个鼠标事件。
- 使用
addEventListener()
方法来监听鼠标事件。 event.button
表示按下哪个鼠标按钮来触发鼠标事件。- 修饰键:alt、shift、ctrl 和 meta (Mac) 可以通过事件对象的属性获得。
screenX
和screenY
属性返回鼠标指针在屏幕坐标中的水平和垂直坐标。- 事件对象的
clientX
和clientY
属性返回发生鼠标事件在浏览器中的水平和垂直坐标。
一起学习更多前端知识,微信搜索【小帅的编程笔记】,每天更新