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

Question

设置为

pointer-events: none

的 div 的子元素是否可以有指针事件？

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

这可能吗？

Answer 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>

Answer 2

在子元素的样式上，添加

pointer-events: auto;

pointer-events: all

对我不起作用，显然仅适用于 SVG 元素。

Answer 3

我的解决方案：

.mouse-false * {
  pointer-events: none;
}

<button class='mouse-false'>
 <i>e</i> test
</button>

Answer 4

作为某些情况下可能的解决方案，您可以设置

height: 0;

到父元素并让子元素溢出。

UPD。 我收到了-6 票反对，所以我认为我的想法还不够清晰。让我用实际行动演示一下：https://jsfiddle.net/lllukom/4tpuv2ns/

在此示例中，有一条闪现消息，显示在标题下方并水平居中。为了让

.flash-messages

后面的内容能够互动，设置了

height: 0

。

与

height: 0

相比，使用

pointer-events: none/all

有一个小小的好处，因此当您在 Chrome 开发人员工具中检查元素并将鼠标悬停在链接上时 - 将检查链接而不是

.flash-messages

容器元素。