我有一个被半透明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>- 测试框架. 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条答案
按热度按时间yvfmudvl1#
正如@Yogi在评论中建议的那样，可以通过设置pointer-events来解决
none元素永远不是指针事件的目标;然而，如果那些后代元素具有被设置为某个其它值的指针事件，则指针事件可以将其后代元素作为目标。
因此，一种方法是将
none的值设置为容器，将auto设置为iframe '（这样覆盖div就有点多余了）：另一种方法是将
none值设置为覆盖：