我们能否使一个元素（div）对鼠标事件透明？

Question

我想使一个元素对事件透明化，如果我点击它，就会激发在它后面的元素的事件。

- ghufranne

---

你说的“它后面的元素”是什么意思？它是如何放在它后面的？ - Arun P Johny

Answer 1

使用CSS属性pointer-events：

myElement {
    pointer-events: none;
}

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

- Denys Séguret

---

它能在IE上工作吗？ - ghufranne

仅在IE的最新版本中。 - Denys Séguret

有一个针对旧版IE的polyfill：https://github.com/kmewhort/pointer_events_polyfill - C-F

我花了好几个小时才最终找到这个。试了各种疯狂的JavaScript干预。点赞！ - StayCool

Answer 2

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

Here's a simple example: When I click on the image the select element opens:

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>

浏览器支持良好(查看支持情况)，除了IE浏览器-只有IE11支持。

- Danield

Answer 3

如果你想用jQuery的方式来做（因为逻辑应该在CSS之外），你可以使用$( "#foo").unbind( "click" );。

你可以在这里找到更多信息：

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

- herbertp.