如何防止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偷走他们的父母＆＃39;放弃事件？

我试过了：
1.用另一个具有position:relative; height:100%; width:100%;的div覆盖iframe 2.提高父母的z指数 3.增加div的z-index我试图隐藏iframe。

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

我不使用jquery。

Answer 1

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

我将您的演示分叉给您：https://codepen.io/anon/pen/dmPRqg?page=1&

我没有连接任何东西以实际切换鼠标事件，你可以通过课程或直接到风格或任何其他几种方式。