参考资料

  1. HTML DOM 被按下的键盘键的keycode？
  2. HTML DOM改变下拉列表中被选中的选项的文本
  3. HTML DOM 返回图像映射某个区域的替代文字实例
  4. HTML DOM 返回一个锚的名字 实例
  5. HTML DOM 返回图像映射的某个区域的hostname实例
  6. HTML DOM 返回文档中表单数目
  7. HTML DOM在下拉列表中选择多个选项
  8. HTML DOM 改变一个iframe的src

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');
  }
});

注意事项

  1. 右键通常会触发contextmenu事件，可以通过event.preventDefault()来阻止默认的右键菜单

  2. 某些浏览器可能对鼠标按钮4和5的支持不一致

  3. 触摸设备上这些事件可能有不同的行为

TAG：按钮事件鼠标键右键浏览器属性常用菜单不同详细