停止通过iframe悬停触发鼠标事件

Question

我正在开发可扩展的横幅添加。问题在于横幅规格要求横幅在鼠标离开横幅时自动折叠。

这很复杂，因为横幅的展开页面有YouTube视频。 HTML5 YouTube视频会插入一个iframe。

所以发生的是，当鼠标移动到YouTube视频上时，横幅会崩溃。它不应该这样做，只有当鼠标离开横幅广告区域时横幅才会合拢。

横幅有4个不同的活动顶层，基于您在横幅中的位置。 “折叠”按钮，重要安全信息复制区域，YouTube视频和横幅的其余部分单击到退出网址。

为了解决这个问题，我用下面的方法为目标的父元素的所有子：Prevent onmouseout when hovering child element of the parent absolute div WITHOUT jQuery

然而，这不适用于iframe的工作。

如果任何人都可以指向正确的方向，以防止当光标悬停在YouTube视频/ iframe上时自动折叠横幅，我将不胜感激。

感谢

Answer 1

依我之见，你正在检查的子元素，使用下面的例子：

if (e.parentNode == this || e == this)，

所以，你可以与其他检查修改它，

• !e检查是否存在来自跨域的iframe
• e.tagName === 'IFRAME'检查悬停的元素不是一个 IFRAME
• event.target !== this检查你是不是回到 旗帜元素

例如：

if (!e || e.parentNode === this || e.tagName === 'IFRAME' || event.target !== this)

所以这只是一个假设，但实际的表达将取决于您的HTML结构。