设置为 pointer-events: none 的 div 的子级是否有可能具有指针事件？答案

【问题标题】：Is it possible for the child of a div set to pointer-events: none to have pointer events?设置为 pointer-events: none 的 div 的子级是否有可能具有指针事件？
【发布时间】：2012-08-08 20:43:16
【问题描述】：

设置为 pointer-events: none 的 div 的子级是否可以有指针事件？

我需要包含另一个 div 的 div 以允许指针事件通过，但 div 本身仍然有事件。

这可能吗？

【问题讨论】：

标签： javascript html css

【解决方案1】：

是的，这是可能的，您基本上只是描述了如何。为父母禁用它并为孩子启用它。

几乎所有浏览器都支持

pointer-events，包括IE11

请注意pointer-events: all 仅适用于SVG。

对于 HTML，仅支持 auto 和 none 值。

.parent {
  pointer-events: none;
}

.child {
  pointer-events: auto;
}

<div class="parent">
  <a href="#">Parent</a>
  <div class="child">
    <a href="#">Child</a>
  </div>
</div>

演示：http://jsfiddle.net/4gQkT/

【讨论】：

wooo，谢谢，我只是不知道可能的 all 值。
但请注意：在 CSS 中对非 SVG 元素使用指针事件是实验性的。该功能曾经是 CSS3 UI 草案规范的一部分，但由于许多未解决的问题，已推迟到 CSS4。 developer.mozilla.org/en-US/docs/CSS/pointer-events
另外，Internet Explorer（甚至 IE10 也不支持）。
考虑到z-index 的工作原理，我不认为这是可能的。
MDN 说 pointer-events:all 仅适用于 SVG。虽然这确实有效，但pointer-events:auto 可能更清晰。

【解决方案2】：

在子元素的样式上，添加

pointer-events: auto;

pointer-events: all 对我不起作用，显然只适用于 SVG 元素。

【讨论】：