傳遞點擊透明div和jQuery懸停的困境

因此，我有一個透明的div，它位於可拖動的YouTube視頻上。雖然YouTube視頻可拖動，但無法暫停/播放視頻。我對此的解決方案是使用div的大小（視頻的底部），當用戶將鼠標懸停在其上時，該對象不再可拖動。當光標離開時，對象現在可以再次拖動。您仍然可以點擊視頻的大部分來拖動它。傳遞點擊透明div和jQuery懸停的困境

這裏inlies問題：

我使用的CSS pointer-events: none;允許點擊要經過的視頻。但是，當pointer-events:none;，jQuery不能識別mouseenter，並假定鼠標已經離開，因此不讓我點擊（現在）可拖動的對象。

我可以做一些黑客來檢查鼠標移動，看看它是否進入該區域，但是這很乏味，並且通常每次移動鼠標時都會調用一個函數，效率非常低，因爲這只是小部分網站。我寧願不這樣做。

任何想法？

編輯：任何想法？沒有必要的代碼。

來源

2011-02-10 switz

如何在mouseenter和mouseleave事件上添加和刪除css屬性「pointer-events：none」？沒有測試過，但從你的方法開始，它可能是一個簡單的修復。假設它起作用;） – 2011-02-12 22:25:57

它不起作用，因爲一旦指針事件被啓用，懸停被禁用。這是這裏的問題。 – switz 2011-02-12 23:53:26

`pointer-events`禁用與鼠標相關的所有JavaScript事件，我想。 – JCOC611 2011-02-13 03:05:42

這取決於您對拖曳機制的控制程度。這聽起來像你寫的。如果是這樣，你是在倒退。您不需要阻止您不想拖動的區域，而需要啓用您需要拖動的區域 - 或者換句話說，您需要在可拖動區域放置一個div來充當「拖動控制柄」。

我真的不知道你還能做什麼。您可以將事件處理程序放在周圍的DOM上，甚至是document.body本身，但這不會幫助您確定拖動區域和非拖動區域。

如果我的解決方案不適合你，你必須檢查鼠標的x/y位置。是的，這很麻煩，而且稍微昂貴一點，但是在使用外部代碼等無法控制的外部代碼（例如Flash）時，您偶爾必須執行此類操作。

來源

2011-02-13 18:49:35 mwilcox

-1

爲什麼不讓覆蓋YouTube視頻的div覆蓋按鈕呢？這樣，當鼠標離開主「拖動」div進入按鈕時，拖動可以停止，並且點擊就會在youtube元素本身上？

來源

2011-02-10 21:06:55 futuremint

我認爲將一個透明div覆蓋所有內容然後使用透明div中的mousedown/move/up處理程序自己處理拖動視頻會比較簡單，而不是爲按鈕做所有這些技巧。如果嵌入式div需要更改，維護起來也會容易得多。

只要小心，IIRC Internet Explorer將忽略完全透明的div（！）的事件。

來源

2011-02-13 18:56:00 6502

傳遞點擊透明div和jQuery懸停的困境

回答

相關問題