参考资料

1. HTML DOM shift键被按下了吗？
2. HTML DOM 返回图像映射某个区域的坐标实例
3. HTML DOM 改变一个包含在iframe中的文档的背景颜色
4. HTML DOM单元格内容水平对齐
5. HTML DOM 元素
6. HTML DOM指定表格的frame
7. HTML DOM获得下拉列表的选项数量
8. HTML DOM 返回图像映射的某个区域的target的值 实例

HTML DOM 元素按下检测

详细介绍

在HTML DOM中，可以通过事件对象(event object)来检测哪个元素被按下了。当用户与页面交互时（如点击、按键等），浏览器会创建一个事件对象，其中包含被操作元素的信息。

相关标签和属性

1. event.target - 指向触发事件的元素

2. event.currentTarget - 指向当前处理事件的元素

3. this - 在事件处理函数中，通常指向绑定事件的元素

用法

element.addEventListener('click', function(event) {
  // 在这里检测被按下的元素
  console.log(event.target);
});

实例

<button id="btn1">按钮1</button>
<button id="btn2">按钮2</button>

<script>
document.getElementById('btn1').addEventListener('click', function(event) {
  console.log('按下的按钮ID:', event.target.id); // 输出 "btn1"
});

document.getElementById('btn2').addEventListener('click', function(event) {
  console.log('按下的按钮ID:', event.target.id); // 输出 "btn2"
});
</script>

功能扩展

CSS 伪类

可以通过CSS伪类来可视化被按下的元素状态：

/* 普通状态 */
button {
  background-color: #4CAF50;
  color: white;
  padding: 10px 20px;
  border: none;
}

/* 按下状态 */
button:active {
  background-color: #3e8e41;
  transform: translateY(1px);
}

JavaScript 扩展

// 检测文档中任何元素的点击
document.addEventListener('click', function(event) {
  console.log('被按下的元素:', event.target.tagName);
  
  // 添加临时按下效果
  event.target.classList.add('active');
  setTimeout(() => {
    event.target.classList.remove('active');
  }, 200);
});

配套CSS:

.active {
  box-shadow: inset 0 0 5px rgba(0,0,0,0.5);
  transform: scale(0.98);
}