将鼠标下移事件移交给被另一个元素覆盖的iframe

Question

我有一个覆盖着半透明div的iframe文档。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>

Answer 1

正如@Yogi在评论中建议的那样，可以通过设置指针事件来解决

none

元素永远不是指针事件的目标;但是，如果后代元素的指针事件设置为其他值，则指针事件可能针对其后代元素。

所以一种方法是将none值设置为容器，auto值设置为iframe '(所以覆盖div是多余的):

<div style="pointer-events: none; ...">
<div style="background: #0007; ..."></div>
<iframe src="testFrame.html" style="pointer-events: auto"></iframe>
</div>

另一种方法是将none值设置为叠加:

<div style="...">
<div style="background: #0007; pointer-events: none; ..."></div>
<iframe src="testFrame.html" style="..."></iframe>
</div>