如何防止 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%;.
2. 提高父级的 z-index。
3. 增加我试图隐藏 iframe 的 div 的 z-index。

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

我不使用jquery。

Answer 1

您必须禁用 iframe 上的鼠标事件。您可以阻止它们发生，pointer-events: none这是非常受支持的：https ://caniuse.com/#feat=pointer-events

我分叉了你的演示来向你展示：https://codepen.io/anon/pen/dmPRqg?page =1&

我没有连接任何东西来实际切换鼠标事件，您可以通过类或直接到样式或任何其他几种方式来做到这一点。