如何根据鼠标所在位置选中对应的HTML标签名称？

实现逻辑 #

• 调用浏览器原生API document.elementFromPoint() 传入鼠标实时坐标，即可获取对应位置的DOM元素
• 监听全局mousemove事件触发样式更新逻辑
• 存储上一次高亮的元素，每次触发事件时先清除旧元素的高亮样式，再给当前元素添加样式，避免多个元素同时出现高亮效果
• 可根据业务需求调整高亮样式，示例中使用红色虚线边框作为高亮效果

完整可运行代码 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>鼠标悬停选中HTML标签</title>
  <style>
    /* 自定义高亮样式类 */
    .hover-highlight {
      border: 2px dashed #f5222d !important;
      box-sizing: border-box !important;
    }
  </style>
</head>
<body>
  <!-- 以下为测试内容，可替换为实际页面内容 -->
  <div>测试区块1
    <p>测试段落文本</p>
    <a href="#">测试链接</a>
    <span>测试行内元素</span>
  </div>
  <div>测试区块2
    <ul>
      <li>测试列表项1</li>
      <li>测试列表项2</li>
    </ul>
  </div>

  <script>
    // 存储上一次被高亮的元素
    let lastHighlightEl = null;

    document.addEventListener('mousemove', e => {
      // 获取当前鼠标位置对应的DOM元素
      const currentEl = document.elementFromPoint(e.clientX, e.clientY);
      
      // 排除html、body根标签，避免整页高亮，可按需删除该判断
      if (currentEl === document.documentElement || currentEl === document.body) {
        if (lastHighlightEl) {
          lastHighlightEl.classList.remove('hover-highlight');
          lastHighlightEl = null;
        }
        return;
      }

      // 仅当元素变化时更新样式，减少不必要的DOM操作
      if (currentEl !== lastHighlightEl) {
        // 移除上一个元素的高亮
        lastHighlightEl?.classList.remove('hover-highlight');
        // 给当前元素添加高亮
        currentEl.classList.add('hover-highlight');
        // 更新记录的上一个高亮元素
        lastHighlightEl = currentEl;

        // 如需获取当前标签信息，可调用以下属性：
        // 标签名：currentEl.tagName.toLowerCase()
        // 元素class：currentEl.className
        // 元素id：currentEl.id
      }
    })
  </script>
</body>
</html>

可选调整说明 #

你可以根据实际需求修改以下配置：

1. 修改.hover-highlight类的样式，可调整边框颜色、样式、背景色等高亮效果
2. 删除根标签过滤逻辑，即可实现html、body标签的高亮选中
3. 增加点击事件监听，即可实现点击选中当前标签的功能

内容的提问来源于stack exchange，提问作者Wael Dghaies