我们可以使一个元素（div）对鼠标事件透明吗？

Question

我想让一个元素对事件透明。如果我点击它，那么它背后的元素会被触发该事件。

Answer 1

使用pointer-events CSS属性：

myElement {
    pointer-events: none;
}

请注意浏览器兼容性：http://caniuse.com/#feat=pointer-events

Answer 2

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

这里有一个简单的例子：当我点击图片时，select元素会打开：

＆＃ 13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

浏览器支持很好（caniuse）：IE除外 - IE11仅支持

Answer 3

或者如果你想用jQuery-Way（因为逻辑应该是CSS），你可以使用$( "#foo").unbind( "click" );。

您可以在此处找到更多信息：

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