停止通過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結構。