我们可以使元素（div）对鼠标事件透明吗？ [复制]答案

【问题标题】：Can we make an element (div) transparent to mouse events? [duplicate]我们可以使元素（div）对鼠标事件透明吗？ [复制]
【发布时间】：2014-11-23 12:29:21
【问题描述】：

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

【问题讨论】：

the element just behind to it.. 是什么意思。那个元素是怎么放在它后面的？

标签： javascript jquery html

【解决方案1】：

使用pointer-events CSS 属性：

myElement {
    pointer-events: none;
}

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

【讨论】：

它会在 IE 中工作吗？
@user1598937 仅在最新版本的 IE 中
旧版 IE 有一个 polyfill：github.com/kmewhort/pointer_events_polyfill

【解决方案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 中受支持

【讨论】：

【解决方案3】：

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

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

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

【讨论】：