2012-12-20 61 views
4

我有一個透明背景圖像集的頂層,並希望忽略所有指針事件。所以最初我設置了<div style="pointer-events"></div>這很好,但後來我發現IE不支持這個。SVG不識別指針事件:無

延伸閱讀我發現好幾個地方,說IE不支持<svg>pointer-events:none,但我不能讓它工作(我之前,所以我可以做這一切錯誤從來沒有使用SVG標籤)。

請看這個非常簡單的小提琴,我希望能達到的。 http://jsfiddle.net/AGVTM/

回答

3

根(最頂部)<svg>元素將不支持pointer-events: none。其原因是這是一個可能的安全漏洞,你可以用SVG覆蓋Facebook Like按鈕,並讓點擊通過,如下例所示:http://jsfiddle.net/rVxTn/

如果SVG元素不是root,那麼點擊應該會通過。這個例子應該在IE9(未經測試)

http://jsfiddle.net/DLEsn/

然而,這並不能解決你的問題的工作,因爲你不能在SVG元素中把HTML元素。

我以前遇到過這個問題多次,我不得不以各種方式解決它。我建議你用實際問題(和可能的截圖)開一個新的問題,看看如何解決這個問題。

+2

根SVG元素上的'pointer-events:none'似乎在IE10中工作,但在IE9中不起作用。那是對的嗎?有沒有辦法讓它在IE9中工作? –

+2

但爲什麼它的工作[這裏](http://www.useragentman.com/blog/2013/04/26/clicking-through-clipped-images-using-css-pointer-events-svg-paths-and- vml /)(在IE9中點擊電視)? –

+0

@MarcoJakob在ngDev問題的根本原因上看到我的帖子。在你的電視例子中,SVG疊加並不是絕對定位的,所以它在IE9中正常工作。 –

1

根源

絕對定位SVGs不會傳播通過點擊在IE9 HTML元素。

查看此webkit測試案例討論:REGRESSION(r66731): pointer-events are broken in some cases和相應的minimal test case意思是,有趣的是,這個bug幾乎已經發展到了WebKit,但是在時間上得到了修復。

在IE 9的情況下,其結果:

IE 9.0.8112.16421 =失敗試驗1:漂浮;通過測試2:直列

變通

參見模擬pointer-events: none此StackOverflow的交 - How to make Internet Explorer emulate pointer-events:none?

他們正在討論在特定的非SVG前部元件,但點擊轉發的技術通過對底層元素也適用於你的情況。