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

Posted 2023-03-05

【中文标题】我们可以使元素（div）对鼠标事件透明吗？ [复制]

【英文标题】：Can we make an element (div) transparent to mouse events? [duplicate]

【发布时间】：2014-11-23 12:29:21

【问题描述】：

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

【问题讨论】：

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

【参考方案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/