文章出處
文章列表
使用絕對定位元素，讓元素A完全蓋住元素B時，如何通過元素A來響應元素B的事件呢？
上圖可以用下面的SVG代碼來實現：
<svg width="200" height="180"> <rect x="50" y="50" width="50" height="50" fill="#f34b5b" onclick="alert('Clicked')"></rect> <rect x="20" y="20" width="160" height="140" fill="#FEDDCE" opacity="0.8"></rect> </svg>
第一個rect被第二個rect完全蓋住，因此無法響應onclick事件。在傳統解決辦法中，我們需要編寫JavaScript代碼來實現事件穿透，即首先響應第二個rect元素的onclick事件，通過坐標值來判斷點擊位置是否位于第一個rect元素的范圍內，從而決定是否觸發第一個rect元素的onclick事件。但是如果圖形和圖形之間的關系比較復雜的話，自己編寫代碼工作量會很大，而且代碼執行效率也不高。好在我們可以通過一個CSS樣式來解決該問題：
pointer-events: none;
將該樣式加到第二個rect元素上，可以很輕松地實現事件穿透效果。該樣式可以應用到任何DOM節點上，所有絕對定位的元素都適用，所有現代主流瀏覽器都已經支持該樣式（經測試IE11也已經支持）。
文章列表
全站熱搜
留言列表
