先說問題描述:
比如我現在的需求是做了一個輪播圖.但是我在輪播圖上面覆蓋了一個iphone x的相框,
也就是可以理解為在輪播圖的最上層覆蓋了一個遮罩.
然后我再去拖拽輪播圖時,發現無法拖拽了.
也就是我標題所描述的遮罩下面的元素無法觸發點擊事件.
解決方案1:
你可以點擊遮罩的時候,觸發下邊元素的點擊事件:
(".a").on("cllick",function(){(".b").click();
)
解決方案2:
把元素遮罩設置為子元素呢,把你想點擊的作為父元素,
這樣使用DOM的冒泡時間,當點擊遮罩的時候,就能捕獲到事件了.
但是有個問題,因為當前頁面你可能有一個遮罩但是有多個點擊事件,恩,酌情處理下吧
解決方案3:
添加pointer-events: none，你的遮罩蓋住了下邊的元素，所以你點擊的事件其實是作用在了遮罩上面。而pointer-events: none可以穿透遮罩，點擊到下面的元素。我剛做的項目用過這個屬性，親測有效。支持ie11及其他瀏覽器
解決方案4:
增加你要點擊頁面的z-index值
解決方案目前我總結的是有這四類. 平時開發中 基本夠用了. 當然 ,你要根據你的需求選擇對應的解決方案. 在這里 我是用 方案三 完美解決 相框內元素無法拖拽的問題的
