如何防止iframe窃取父容器的放置事件？

Question

我的网页上有这样的结构：

<div> I have dragenter, dragover, drop, and dragleave handlers
  <div> Lots of nice content
  <iframe src="somethingCoolFromSomeoneElse"></iframe>
</div>

请在此处查看此演示： https : //codepen.io/glenpierce/pen/JLoJdJ?page=1&

我的问题是，当用户将某物拖放到父div中时，如果它们恰好悬停在iframe上，则iframe会窃取drop事件。

如何防止作为放置目标的孩子的iframe窃取其父母的放置事件？

我努力了：
1.用position:relative; height:100%; width:100%;另一个div覆盖iframe position:relative; height:100%; width:100%; position:relative; height:100%; width:100%; 。
2.提高父级的Z索引。
3.增加我试图隐藏iframe的div的z-index。

当拖动事件开始时，我可以尝试隐藏iframe，但这会以令人困惑的方式更改UI。

我不使用jQuery。

Answer 1

您将必须在iframe上禁用鼠标事件。 您可以通过pointer-events: none来阻止它们发生pointer-events: none支持pointer-events: none ： https : //caniuse.com/#feat=pointer-events

我派出了您的演示给您看： https : //codepen.io/anon/pen/dmPRqg?page=1&

我并没有连接任何东西来实际切换鼠标事件，您可以通过类或直接针对样式或任何其他几种方式来实现。