Javascript：如果div包含iframe，则不会发生div上的click事件

Question

这是我的示例html标记：

<div>
    <iframe></iframe>
</div>

iframe大小恰好填充了外部div

然后我将事件处理程序添加到div点击事件：

div.addEventListener("click", function () {
    console.log("click");
});

但是当我点击div时，什么也没发生。似乎iframe会停止点击事件泡泡吗？

为什么会发生这种情况，我该如何解决这个问题？

Answer 1

这很可能是因为您点击了iframe而不是div（由于iframe大小与div完全相同）。

如果你想点击div而不是触发其他一些事件/动作，那么你可以简单地将iframe的顺序放在div本身之下，在你的CSS中使用类似的东西：

div iframe {
    z-index: -1;
}