纯原生JS检测元素上的鼠标光标类型变化（无jQuery依赖）

浏览器原生事件对象上没有直接暴露当前生效的光标属性，我们可以结合计算样式、动态解析逻辑实现无依赖的光标类型获取，不需要提前给任何元素配置自定义光标样式。

核心实现逻辑 #

通过mouseover事件拿到当前鼠标的实际命中元素，结合浏览器样式计算结果、auto值的动态解析，得到和屏幕实际显示完全一致的光标类型，可识别的状态包含pointer、text、move、wait等所有常见类型。

可直接运行的原生代码 #

document.addEventListener('mouseover', (e) => {
  // 优先读取元素最终生效的计算样式中的cursor值
  let cursorType = window.getComputedStyle(e.target).cursor;

  // 处理auto值的动态渲染场景（auto下浏览器会根据内容自适应调整光标，需要手动解析）
  if (cursorType === 'auto') {
    // 命中带href属性的超链接，实际光标为pointer
    if (e.target.tagName === 'A' && e.target.hasAttribute('href')) {
      cursorType = 'pointer';
    } else {
      // 判断当前鼠标坐标下是否存在可选中的文本节点，存在则实际光标为text
      const textRange = document.caretRangeFromPoint(e.clientX, e.clientY);
      if (textRange && textRange.startContainer.nodeType === Node.TEXT_NODE) {
        cursorType = 'text';
      } else {
        // 其他auto场景下，实际显示默认箭头光标
        cursorType = 'default';
      }
    }
  }

  console.log('当前光标状态：', cursorType);
});

方案特点 #

• 无任何第三方依赖，完全基于浏览器原生API实现
• 拿到的光标值和实际屏幕显示完全匹配：既可以识别页面自定义的cursor样式，也可以识别浏览器用户代理默认的光标规则（比如超链接的pointer、文本区域的text）
• 自动兼容pointer-events: none的元素穿透场景，不需要额外写判断逻辑
• 支持识别所有标准光标类型：pointer、text、move、wait、crosshair、help等

补充说明
如果需要识别浏览器全局JS阻塞时的忙碌wait光标，可以在上述逻辑基础上，额外监听文档加载状态，当主线程处于阻塞状态时优先返回wait值即可，日常交互场景下现有逻辑已经能覆盖绝大多数使用需求。

内容的提问来源于stack exchange，提问作者Arnaud Hrt