通过透明div传递点击，jQuery的困境悬停

Question

所以我有一个透明的div，它位于一个可拖动的youtube视频上。虽然youtube视频可以拖动，但您无法暂停/播放视频。我的解决方案是使用一个与按钮大小相同的div（视频底部），当用户将鼠标悬停在它上面时，该对象不再可拖动。当光标离开时，该对象现在可以再次拖动。您仍然可以点击视频的大部分进行拖动。

这里有问题：

我使用CSS pointer-events: none;以允许点击进入视频。但是，当pointer-events:none;时，jQuery无法识别mouseenter，并假设鼠标已离开，因此不允许我单击（现在）可拖动对象。

我可以做一些黑客来检查鼠标移动以查看它是否移动到该区域，但这很繁琐，并且通常每次移动鼠标时都会调用一个函数效率非常低，因为这只是网站的一小部分。我宁愿不这样做。

有什么想法吗？

编辑： 有任何想法吗？ 没有必要的代码。

Answer 1

我认为将一个透明div覆盖所有内容然后使用透明div中的mousedown / move / up处理程序处理视频拖动会更简单，而不是为按钮做所有这些诡计。如果需要更改嵌入的div，它也更容易维护。

请注意，IIRC Internet Explorer会忽略完全透明的div（！）的事件。

Answer 2

这取决于你对拖拽机制的控制程度。这听起来像是你写的。如果是这样，你就是倒退了。您不需要阻止您不想要拖动的区域，而是需要启用您想要拖动的区域 - 或者换一种方式，您需要在可拖动区域中放置一个div作为“拖动手柄”。

我真的不知道你还能做些什么。您可以将事件处理程序放在周围的DOM上，甚至可以放在document.body本身上，但这无助于您在拖动区域和非拖动区域之间进行确定。

如果我的解决方案不适合您，您必须检查鼠标x / y位置。是的，这是一个麻烦而且稍贵，但是在处理你无法控制的外部代码（例如Flash）时，偶尔也要做这些事情。

Answer 3

为什么不让覆盖youtube视频的div根本不覆盖按钮？这样当鼠标离开主“拖动”div以转到按钮时，拖动可以停止，点击将只在youtube元素本身上？