HTML DOM 哪个鼠标键被点击了？
2025-04-24
33
参考资料
HTML DOM 哪个鼠标键被点击了？
HTML DOM 鼠标键点击检测
详细介绍
在HTML DOM中，可以通过鼠标事件对象的button属性来检测哪个鼠标键被点击了。这个属性返回一个数值，表示被按下的鼠标按钮。
鼠标键对应值
0: 主按钮（通常是左键）1: 中间按钮（通常是滚轮按钮）2: 次按钮（通常是右键）3: 第四个按钮（通常是浏览器后退按钮）4: 第五个按钮（通常是浏览器前进按钮）
常用标签和事件
常用的事件包括：
onclick- 点击事件onmousedown- 鼠标按下事件onmouseup- 鼠标释放事件oncontextmenu- 右键菜单事件
基本用法
element.addEventListener('mousedown', function(event) {
console.log('按下的鼠标键:', event.button);
});实例代码
<!DOCTYPE html>
<html>
<head>
<style>
#clickArea {
width: 300px;
height: 200px;
border: 1px solid black;
text-align: center;
line-height: 200px;
cursor: pointer;
}
</style>
</head>
<body>
<div id="clickArea">点击这里测试鼠标键</div>
<p id="result"></p>
<script>
const clickArea = document.getElementById('clickArea');
const result = document.getElementById('result');
clickArea.addEventListener('mousedown', function(event) {
let buttonName;
switch(event.button) {
case 0: buttonName = "左键"; break;
case 1: buttonName = "中键"; break;
case 2: buttonName = "右键"; break;
default: buttonName = "其他键(" + event.button + ")";
}
result.textContent = `你按下了: ${buttonName}`;
});
</script>
</body>
</html>CSS扩展
可以通过CSS来改变不同鼠标键点击时的样式：
/* 左键点击效果 */
#clickArea:active {
background-color: #e0e0e0;
}
/* 右键点击效果 - 需要JavaScript配合添加类 */
.right-click {
background-color: #ffcccc;
}
/* 中键点击效果 */
.middle-click {
background-color: #ccffcc;
}对应的JavaScript可以这样修改：
clickArea.addEventListener('mousedown', function(event) {
// 移除所有可能的类
this.classList.remove('right-click', 'middle-click');
if(event.button === 2) { // 右键
this.classList.add('right-click');
} else if(event.button === 1) { // 中键
this.classList.add('middle-click');
}
});注意事项
右键通常会触发
contextmenu事件，可以通过event.preventDefault()来阻止默认的右键菜单某些浏览器可能对鼠标按钮4和5的支持不一致
触摸设备上这些事件可能有不同的行为
