JavaScript中如何获取元素计算后实际生效的光标类型？

你直接通过getComputedStyle(e.target).cursor只能拿到auto的核心原因是：

• cursor是可继承CSS属性，绝大多数元素本身不会显式设置cursor值，会继承祖先的设置，直接读当前target的属性自然只能拿到默认值auto
• 浏览器不会把最终渲染用的解析后光标值（比如文本上的I型、链接上的手型）直接写回computedStyle对象，对于默认行为触发的光标（比如普通文本上方默认的text光标），CSS层面本身就没有显式声明，自然读不到。
• 浏览器没有提供原生的「光标类型变化」事件，需要自行实现检测逻辑。

第一步：编写获取真实光标类型的工具函数 #

需要先向上遍历DOM树，找到第一个显式设置了非auto光标的祖先元素，拿到声明的光标值；如果所有祖先都没有显式设置，再根据元素语义、鼠标位置判断浏览器默认使用的光标类型：

function getActualCursor(e) {
  let currentEl = e.target;
  // 向上查找显式设置了非auto光标的祖先
  while (currentEl) {
    const cursorVal = window.getComputedStyle(currentEl).cursor;
    if (cursorVal !== 'auto') return cursorVal;
    currentEl = currentEl.parentElement;
  }
  // 无显式设置时，判断浏览器默认光标
  // 文本输入、可编辑区域、普通文本节点上方默认是text(I型)
  const isTextEl = ['INPUT', 'TEXTAREA'].includes(currentEl?.tagName) || currentEl?.isContentEditable;
  const textRange = document.caretRangeFromPoint(e.clientX, e.clientY);
  const isOnTextNode = textRange?.startContainer.nodeType === Node.TEXT_NODE;
  if (isTextEl || isOnTextNode) return 'text';

  // 链接、按钮、摘要元素默认是pointer(手型)
  const isClickable = (currentEl?.tagName === 'A' && currentEl.hasAttribute('href')) 
    || currentEl?.tagName === 'BUTTON' 
    || currentEl?.tagName === 'SUMMARY';
  if (isClickable) return 'pointer';

  // 其余场景默认返回auto
  return 'auto';
}

第二步：监听鼠标移动检测光标变化 #

不要只用mouseover事件——鼠标在同一个元素内部从空白移到文本上时，光标会从默认箭头变成I型，但不会触发mouseover，用mousemove搭配缓存值对比即可，性能开销极低：

let prevCursor = null;
document.addEventListener('mousemove', e => {
  const currentCursor = getActualCursor(e);
  if (currentCursor !== prevCursor) {
    // 光标类型发生变化，在这里写对应元素的修改逻辑即可
    // e.target就是当前光标对应的元素
    console.log(`光标类型变化：${prevCursor} → ${currentCursor}`, e.target);
    prevCursor = currentCursor;
  }
});

• 上述默认光标判断逻辑覆盖了90%以上的日常使用场景，如果有自定义控件（比如拖拽调整大小的resize光标、等待状态的wait光标），可以根据自己的业务场景往判断分支里补充规则。
• 如果页面里有通过Shadow DOM隔离的组件，需要穿透Shadow Root继续向上查找，不然会拿不到组件内部设置的cursor值。

内容的提问来源于stack exchange，提问作者Danny Yuan