如何将mousedown事件传递给被半透明div覆盖的iframe？

我的iframe被一个半透明div覆盖，iframe内的文档需要捕获mousedown事件，但上方的div阻止了该事件，有没有办法把事件传递给iframe？

复现测试的最简代码 #

主文档

<div style="width: 320px; height: 200px; position: relative">
    <div style="background: #0007; position: absolute; z-index: 1; left: 0; right: 0; top: 0; bottom: 0"></div>
    <iframe src="testFrame.html" style="width: 100%; height: 100%"></iframe>
</div>

testFrame.html

<style>
    body { margin: 0; }
    #elem { width: 100vw; height: 100vh; }
</style>

<div id="elem">
    Frame
</div>

<script>
    document.getElementById("elem").addEventListener("mousedown", _=>alert("click"));
</script>

解决方案 #

1. 用CSS让上层div不拦截鼠标事件

直接给覆盖的div添加pointer-events: none样式，这个属性会让元素完全忽略所有鼠标交互，事件会直接穿透到下方的iframe。

修改主文档中的div样式：

<div style="background: #0007; position: absolute; z-index: 1; left: 0; right: 0; top: 0; bottom: 0; pointer-events: none"></div>

注意：如果这个覆盖div本身需要响应鼠标事件（比如点击、hover），这个方法就不适用了。

2. 手动转发事件到iframe（适用于需要保留div交互的场景）

如果上层div需要保留部分鼠标功能，可以在div上监听mousedown事件，然后手动创建事件并派发到iframe内部的目标元素上。

修改主文档代码：

<div style="width: 320px; height: 200px; position: relative">
    <div id="overlay" style="background: #0007; position: absolute; z-index: 1; left: 0; right: 0; top: 0; bottom: 0"></div>
    <iframe id="targetFrame" src="testFrame.html" style="width: 100%; height: 100%"></iframe>
</div>
<script>
    const overlay = document.getElementById('overlay');
    const iframe = document.getElementById('targetFrame');
    
    overlay.addEventListener('mousedown', (e) => {
        // 获取iframe内部的文档对象
        const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
        const targetElem = iframeDoc.getElementById('elem');
        
        // 创建与原事件属性一致的mousedown事件
        const forwardedEvent = new MouseEvent('mousedown', {
            bubbles: true,
            cancelable: true,
            clientX: e.clientX,
            clientY: e.clientY,
            screenX: e.screenX,
            screenY: e.screenY
        });
        
        targetElem.dispatchEvent(forwardedEvent);
    });
</script>

限制：这个方法要求iframe和主文档同源，如果跨域，浏览器的同源策略会阻止主文档访问iframe内部的DOM，导致事件转发失败。

3. 调整DOM层级（仅视觉允许时使用）

如果不需要覆盖div始终在iframe上方，可以降低div的z-index或者提升iframe的z-index，让iframe处于上层。但这样会失去div覆盖的视觉效果，所以只适合对视觉要求不严格的场景。

内容的提问来源于stack exchange，提问作者Jan Turoň