javascript - 如何防止 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 会窃取放置事件。

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

我试过:
1. 用另一个具有 position:relative; 的 div 覆盖 iframe；高度:100%；宽度:100%;.
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&

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