elementFromPoint偶现返回pointer-events为none的元素，是Bug还是代码问题？

根据MDN文档，Document.elementFromPoint(x, y) 方法应返回指定视口坐标处最顶层的元素，且会忽略pointer-events设为none的元素，返回其下方元素。但实际使用中该方法有时会返回element.style.pointerEvents为none的元素，导致下方代码陷入无限循环冻结页面：

function getFirstImageUnderPointer(ev) {
    const { clientX, clientY } = ev;
    const elementStylePairs = [];
    let hoveredElement = document.elementFromPoint(clientX, clientY);
    
    while (hoveredElement instanceof HTMLElement && hoveredElement.tagName !== "HTML" && hoveredElement.tagName !== "IMG") {
        elementStylePairs.push([hoveredElement, hoveredElement.style.pointerEvents]);
        hoveredElement.style.pointerEvents = 'none';
        hoveredElement = document.elementFromPoint(clientX, clientY);
    }
    
    // Set original style
    for (let pair of elementStylePairs) {
        pair[0].style.pointerEvents = pair[1];
    }
    
    return hoveredElement instanceof HTMLImageElement
        ? hoveredElement
        : null;
}

function handleMouseDown(ev) {
    const img = getFirstImageUnderPointer(ev);
    console.log(img?.id);
}

document.body.addEventListener("mousedown", handleMouseDown, { capture: true });

该问题可在Firefox中访问含视频的Twitter/X页面，点击进度条时复现，此时循环初始的hoveredElement.style.pointerEvents即为none。

结论：代码实现有误，而非浏览器Bug #

问题根源在于代码对pointer-events属性的判断和处理存在两处漏洞：

• 仅检查内联样式的pointer-events值：
  代码中只通过hoveredElement.style.pointerEvents判断属性值，但元素的pointer-events可能来自CSS类、全局样式表，此时element.style.pointerEvents为空字符串，但元素实际生效的计算值是none，代码完全没处理这种情况。
• 未处理初始元素就是pointer-events:none的非目标元素：
  当循环启动时，如果初始元素本身是pointer-events:none的非IMG/HTML元素，代码会重复给它设置内联pointer-events:none（等于无修改），再次调用elementFromPoint仍会返回同一个元素，直接触发无限循环。

修复后的代码 #

function getFirstImageUnderPointer(ev) {
    const { clientX, clientY } = ev;
    const elementStylePairs = [];
    let hoveredElement = document.elementFromPoint(clientX, clientY);
    
    while (hoveredElement instanceof HTMLElement && hoveredElement.tagName !== "HTML") {
        // 命中目标IMG元素，直接终止循环
        if (hoveredElement.tagName === "IMG") {
            break;
        }
        
        // 获取元素实际生效的pointer-events计算值
        const computedPointerEvents = window.getComputedStyle(hoveredElement).pointerEvents;
        
        // 处理本身就是pointer-events:none的元素
        if (computedPointerEvents === 'none') {
            elementStylePairs.push([hoveredElement, hoveredElement.style.pointerEvents]);
            hoveredElement.style.pointerEvents = 'none';
            const nextElement = document.elementFromPoint(clientX, clientY);
            
            // 恢复样式后判断是否能穿透到下方元素
            hoveredElement.style.pointerEvents = elementStylePairs.pop()[1];
            if (nextElement === hoveredElement) {
                hoveredElement = null;
                break;
            }
            hoveredElement = nextElement;
            continue;
        }
        
        // 正常处理可穿透的元素
        elementStylePairs.push([hoveredElement, hoveredElement.style.pointerEvents]);
        hoveredElement.style.pointerEvents = 'none';
        hoveredElement = document.elementFromPoint(clientX, clientY);
    }
    
    // 恢复所有元素的原始内联样式
    for (const [elem, originalValue] of elementStylePairs) {
        elem.style.pointerEvents = originalValue;
    }
    
    return hoveredElement instanceof HTMLImageElement ? hoveredElement : null;
}

function handleMouseDown(ev) {
    const img = getFirstImageUnderPointer(ev);
    console.log(img?.id);
}

document.body.addEventListener("mousedown", handleMouseDown, { capture: true });

关键修复点： #

1. 使用window.getComputedStyle获取元素实际生效的pointer-events值，覆盖CSS类、全局样式表的情况
2. 针对本身就是pointer-events:none的元素，增加穿透验证逻辑，避免无限循环
3. 提前判断目标IMG元素，减少不必要的循环操作

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