2014-11-21 138 views
1

我目前正在開發一個具有一些傳統Flash頁面的應用程序。我們最近在標題中添加了一個下拉菜單,可以打開一個可滾動的div。標題和下拉列表是HTML。防止在Firefox中使用Flash處理鼠標滾輪事件

下面是一個線框來說明設置。

https://wireframe.cc/27ahkk

我們遇到了一個問題,即使用滾輪,而徘徊在下拉列表中根據需要也沒有表現。

  • 下拉不滾動
  • Flash內容的滾動而不是

我預計這是因爲,隨着車輪/鼠標滾輪事件的Flash的處理的一部分,它是防止起泡,防止默認動作。我在Chrome中進行了一些初始測試,發現我附加到泡泡階段的任何事件監聽器實際上都沒有被調用。

我的解決方案是在捕獲階段將窗口/鼠標滾輪事件偵聽器附加到窗口。在該處理程序中,如果鼠標懸停在我們的下拉列表上,我呼叫event.stopPropagation()以防止事件觸及Flash(因此允許執行默認操作)。粗略地:

window.addEventListener("wheel", function (event) { 
    if ($('.dropdown-selector:hover').length != 0) { 
     event.stopPropagation(); 
    } 
}, true); 

當下拉關閉時,此事件將被刪除。

這在Chrome中運行良好,只要您回退到棄用的「鼠標滾輪」事件而不是使用更現代的「輪子」事件,它就可以在IE中運行。但是,Firefox是另一回事。

雖然Firefox支持「wheel」事件,但事件從瀏覽器發送到Flash的方式似乎完全不同。

如果你徘徊在下拉列表,並使用鼠標滾輪滾動:

  1. 處理程序將火
  2. if條件能夠正確檢測懸停
  3. event.stopPropagation()
  4. 但是,Flash內容依然滾動
  5. 下拉div不滾動

更奇怪的是,如果你沒有懸停在下拉列表並使用鼠標滾輪滾動:

  1. 處理程序永遠不會觸發
  2. Flash內容滾動

這比觀察到的不同Chrome和IE瀏覽器的行爲,其中滾動懸停在Flash上​​仍然會觸發處理程序,但由於鼠標未超過下拉列表,因此event.stopPropagation()永遠不會被調用,因此它會捕獲到將在其中處理事件的Flash。

這讓我感到困惑,因爲我在捕獲階段將偵聽器連接到window,所以我應該在頁面上的其他任何事情之前接收事件。但是在Firefox中,似乎Flash甚至在window之前獲取事件,或者Flash完全收到一個不同的事件(即使JavaScript在調試器中的斷點上停止,Flash似乎也會收到這些事件)。

有沒有人有使用Flash和Firefox的經驗,並且更好地理解瀏覽器如何將事件發送到嵌入式Flash內容?爲什麼我的策略在所有其他瀏覽器中都能正常工作,但在Firefox中卻不足?在嘗試深入研究Flash代碼本身以解決問題之前,有任何可能的解決方法?

謝謝!

回答

1

所以我找到了這個問題的一個修復,雖然不完全確定它爲什麼會起作用。儘管Firefox同時支持「輪子」和「鼠標滾輪」事件,但向我們的聽衆註冊這些事件並不會產生所需的行爲。不過,聽「DOMMouseScroll」事件效果很好。

不知道這是由於某些瀏覽器特定的邏輯和/或我們的傳統Flash代碼如何處理滾動,但它的工作原理令我滿意。 :)

相關問題