参考资料

  1. HTML DOM改变下拉列表中被选中的选项的文本
  2. HTML DOM单元格内容垂直对齐
  3. HTML DOM 访问
  4. HTML DOM对单个单元格的内容垂直对齐
  5. HTML DOM 返回图像映射的某个区域的shape 实例
  6. HTML DOM 返回一个iframe中的frameborder属性的值
  7. HTML DOM 返回一个区域的href属性的锚部分实例
  8. HTML DOM 用指定的Name弹出元素的数量实例

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：按钮事件鼠标键右键浏览器属性常用菜单不同详细

声明：本站所有文章资源内容，如无特殊说明或标注，均为采集网络资源。如若本站内容侵犯了原著者的合法权益，可联系本站删除。