参考资料

1. HTML DOM将下拉列表变成多行列表
2. HTML DOM禁用和启用下拉列表
3. HTML DOM 返回文档的标题实例
4. HTML DOM删除表格中的行
5. HTML DOM对单个单元格的内容垂直对齐
6. HTML DOM 返回一个iframe中的longdesc属性的值
7. HTML DOM 返回一个锚的名字 实例
8. HTML DOM 返回一个表单中所有元素的value 实例

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

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