我們可以使元素（div）對鼠標事件透明嗎？

Question

我想使事件對元素透明。如果我點擊它，它後面的元素會觸發該事件。

Answer 1

使用pointer-events CSS屬性：

myElement { 
    pointer-events: none; 
} 

待辦事項瀏覽器compatibil ity：http://caniuse.com/#feat=pointer-events

Answer 2

是的。在上面的元素上設置pointer-events:none;。

這裏有一個簡單的例子：當我在圖像上單擊選擇元素打開：

div { 
 
    width: 14px; 
 
    height: 14px; 
 
    position:relative; 
 
    top: -18px; 
 
    left: 58px; 
 
    pointer-events: none; 
 
    background: url(http://lorempixel.com/14/14) no-repeat; 
 
}

<select> 
 
    <option value="value1">Value 1</option> 
 
    <option value="value2" selected>Value 2</option> 
 
</select> 
 
<div></div>

瀏覽器支持是好的（caniuse）：除了IE瀏覽器 - 它僅在IE11

支持

Answer 3

或者如果你想這樣做的jQuery的方式（因爲邏輯應該是CSS），你可以使用$("#foo").unbind("click");。

你可以在這裏找到更多的信息：

http://api.jquery.com/unbind/