SVG Blocks Touch/Mousewheel events

有沒有解決方法？我正在運行自己的自定義滾動條腳本，而不是使用內置的瀏覽器功能。出於多種原因，我更喜歡使用SVG來處理圖像元素，但其中一個很重要的缺陷是觸摸或鼠標滑過svg會阻止該事件，從而導致頁面滾動停止。這在移動瀏覽器上更爲明顯，其中svg可能佔據文檔的整個寬度，在這種情況下，只要到達SVG元素，用戶就無法滾動瀏覽它。SVG Blocks Touch/Mousewheel events

我沒有在IE中測試過，但在Chrome中，觸摸命令不工作在SVG之上，在Firefox上，mousewheel事件是一個問題。我認爲這將是在IE瀏覽器哈哈。

一個體面的解決方案是以某種方式將事件添加到我的SVG元素捕獲事件並將它們傳遞到滾動事件。我似乎無法找到辦法。更好的解決方案是以某種方式將文檔放在SVG上方，這樣SVG根本不會干擾滾動。再次，似乎無法找到一種方法。

我用對象標籤嵌入我的SVG元素，這對於各種原因很重要。我假設對象標籤實際上是罪魁禍首。

來源

2013-05-09 ryandlf

這是一個奇怪的行爲，SVGs有任何JavaScript嵌入在他們？向你的CSS添加'object {pointer-events：none;}'應該解決Firefox和Chrome（但不是IE）的問題。 – Duopixel 2013-05-10 17:04:14

Per Duopixel的評論。增加：

object { 
    pointer-events: none; 
}

到CSS確實解決了Firefox和Chrome的問題。我仍然需要在IE中進行測試，但現在這似乎是最好和最簡單的解決方案。

一篇好文章，解釋了指針的事件屬性可以在http://davidwalsh.name/pointer-events

發現如果上述問題是在IE中的一個問題，你可以使用JavaScript的解決方案，需要捕捉指針的位置，並傳遞適當的元素。一個使用jQuery的工作版本，但可以很容易地被翻譯成香草javascript可以在這裏找到：http://jsbin.com/uhuto/1/edit

來源

2013-05-14 02:45:24 ryandlf

SVG Blocks Touch/Mousewheel events

回答

相關問題