通过透明 div 传递点击和 jQuery 悬停的问题
所以我有一个透明的 div 位于可拖动的 YouTube 视频上方。虽然 YouTube 视频可拖动，但您无法暂停/播放视频。我的解决方案是采用一个与按钮大小相同的 div（视频底部），当用户将鼠标悬停在其上时，该对象将不再可拖动。当光标离开时，该对象现在可以再次拖动。您仍然可以单击大部分视频来拖动它。
这里存在问题：
我使用 CSS pointer-events: none; 来允许点击进入视频。但是，当 pointer-events:none; 时，jQuery 无法识别 mouseenter，并假设鼠标已离开，从而不允许我单击（现在）可拖动的目的。
我可以做一些修改来检查鼠标移动，看看它是否移动到该区域，但这很乏味，而且一般来说，每次移动鼠标时都调用一个函数，效率非常低，因为这只是网站的一小部分。我宁愿不以这种方式处理它。
有什么想法吗？
编辑： 有什么想法吗？ 无需代码。
So I have a transparent div which lies over a draggable youtube video. While the youtube video is draggable, you can't pause/play the video. My solution to this is take a div that's the size of the buttons (bottom of the video), and when a user hovers over it, the object is no longer draggable. When the cursor leaves, the object is now draggable again. You can still click on the bulk of the video to drag it.
Here inlies the problem:
I used the CSS pointer-events: none; as to allow the click to go through to the video. However, when pointer-events:none;, jQuery doesn't recognize the mouseenter, and assumes the mouse has left, thereby not letting me click on the (now) draggable object.
I could do some hacks to check the mousemovement to see if it moves into that area, but that's tedious and in general having a function called every time the mouse is moved is very inefficient as this is only a small part of the website. I'd rather not approach it this way.
Any ideas?
Edit:
Any ideas?
No code necessary.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
我认为放置一个透明 div 覆盖所有内容，然后使用透明 div 中的 mousedown/move/up 处理程序自行处理视频的拖动，而不是对按钮进行所有这些欺骗，会更简单。如果需要更改嵌入的 div，维护起来也容易得多。
请注意，IIRC Internet Explorer 会忽略完全透明 div 的事件（！）。
I think it would be simpler to put one transparent div covering everything and then handling the drag of the video yourself using the mousedown/move/up handlers in the transparent div instead of doing all this trickery for the buttons. It is also much easier to maintain if the embedded div needs to be changed.
Just be careful that IIRC Internet Explorer ignores events for a totally transparent div (!).
这取决于您对拖动机制的控制程度。听起来像是你写的。如果是这样，你就搞反了。您需要启用您想要可拖动的区域，而不是阻止您不希望可拖动的区域 - 或者换句话说，您需要在可拖动区域中放置一个 div 来充当“拖动手柄”。
我真的不知道你还能做什么。您可以将事件处理程序放在周围的 DOM 上，甚至是 document.body 本身上，但这不会帮助您确定拖动区域和非拖动区域。
如果我的解决方案不适合您，您必须检查鼠标的 x/y 位置。是的，这很麻烦，而且有点贵，但是在使用您无法控制的外部代码（例如 Flash）时，您有时必须做这样的事情。
It depends upon how much control you have over the drag mechanism. It sounds like you wrote it. If so, you're doing it backwards. Instead of blocking the area you don't want draggable, you need to enable the area you do want draggable - or put another way, you need to place a div in the draggable area to act as a "drag handle".
I don't really know what else you can do. You can put event handlers on the surrounding DOM or even the document.body itself, but that won't help you determine between the drag-area and non-drag area.
If my solution doesn't work for you, you have to check the mouse x/y location. Yes it's a hassle and slightly expensive, but you occasionally have to do such things when working with external foreign code that you have no control over such as Flash.
为什么不直接让覆盖 YouTube 视频的 div 完全不覆盖按钮呢？这样，当鼠标离开主“拖动”div 转到按钮时，拖动可以停止，并且单击将仅在 youtube 元素本身上？
Why not just make the div that overlays the youtube video not cover the buttons at all? That way when the mouse moves off of the main "drag" div to go to the buttons, dragging can stop and the click will just be on the youtube element itself?