在我的記憶中pointer-events就是用來進行事件穿透的，也就是說，如果給父元素設置了pointer-events:none，那么父元素不再監聽鼠標事件事件(類似於touch,click這樣的)。
需要這樣做的情況，通常是我們想“穿透”父層，直接點擊子元素時，父元素會當作什么也沒有發生一樣。這是我以前的知識體系中所收集的信息。現在看來也沒有錯，只是這不完整。
它是有副作用的，或者說，上面的知識應用是有條件的。當我們在屬於父子關系的元素上應用這個（pointer-events:none）屬性，確實是這個行為，但是如果當我們作用在平行層的兩個塊元素上的時候，它還是這樣子嗎？
這個問題就是由上面這個截圖所示的應用所引出的。我稍后在給出簡化的原型。先簡單介紹一下這個場景演示的問題。上圖其實是有四個層的：
作為頁面容器的page層以及page下面的花花草草所組成的子層，為了后面的演示方便，取名為pagesub層。
另一層是用來進行左右翻頁的按鈕層，這一層和page層是並列的，取名為float層，因為看起來像是浮在page上面。float層下面有一個叫floatsub層，用來包裝小蘑菇按鈕。
我希望點擊小蘑菇的時候，不會觸發float層上的事件，於是我給float層加上了pointer-events:none；那么問題來了，現在我點小蘑茹沒有反應。經過監聽，發現點到的是page里邊的花花草草層。我百思不得其姐，經過一翻激烈的追求，終於得到真愛。下面我就公布這一充滿曲折的求姐過程：
pagesub是page的子元素，floatpage是float 的子元素，它們的位置關系如上圖所示。其中綠色的page就是頁面層，藍色的pagesub就是花花草草層。紅色的float就是按鈕層
灰色的float page就是蘑菇層。(色盲的朋友看文字就好了)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> body { text-align: center; } .page { position: absolute; top : 0; left:0; height: 400px; background-color: green; width:500px; z-index: 2; } .float { width: 400px; height: 200px; position: absolute; top:50px; left: 50px; z-index: 3; pointer-events:none; background-color: red; } .pagesub { width: 90%; height: 60%; position: absolute; top:30px; left: 10px; z-index: 4; background-color: blue; color:white; } .floatsub { width:80%; height: 60%; position: absolute; top:33px; left:44px; background-color: gray; z-index: 4; color: white; } </style> </head> <body> <div class="page"> page <div class="pagesub"> pagesub </div> </div> <div class="float"> float <div class="floatsub"> float page </div> </div> </body> </html>
根據上面的源碼，在chrome中進行調式，發現，當我在float page（灰色）層查看元素的時候，居然顯示是藍色的pagesub層。簡直沒有天理了，有圖有真相：
但是當我試着把pointer-events這個屬性去掉的時候，奇跡出現了，一切回歸預期。這是為什么呢？說明pointer-events 會影響絕對定位的層及關系！當然，前提條件是並列關系，而不是父子關系。在並列關系的元素上使用pointer-events，會造成后面的元素被忽視掉。
注意我這里說的“絕對定位的層及關系” 是指看起來像是用了pointer-events:none屬性的元素跑到沒有用的元素的后面去了，而至於底層是不是真的發生了這樣的情況，我沒法去證實，但是測試的結果表明就是這樣的現象。
除了none之外，順道提一下pointer-events：的其它幾個屬性;
- auto------- 默認值，鼠標不會穿透當前層
- 針對SVG的：
visiblePainted*,visibleFill*,visibleStroke*,visible*,painted*,fill*,stroke*,all*
好了，本次分享就到這里了，發貼辛苦！