如何防止 iframe 从父容器中窃取 drop 事件？

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

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

我不使用 jquery。

Answer 1

您将不得不在 iframe 上禁用鼠标事件。您可以使用得到很好支持的pointer-events: none 阻止它们发生：https://caniuse.com/#feat=pointer-events

我 fork 你的演示给你看：https://codepen.io/anon/pen/dmPRqg?page=1&

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