Question

我有以下结构

<div class='offline'>some text <button class='delete'>Delete</button></div>

是否可以使用指针事件禁用div：none但是保持按钮处于活动状态？

我试过

div.offline:not(.delete) {
    pointer-events: none;
}

没有成功。有什么想法吗？

Answer 1

您可以在父级上禁用事件并在子级上重新启用它们。

.parent {
  pointer-events: none;
}

.child {
  pointer-events: auto;
}

<div class='parent'>
  foo
  <button class='child'>bar</button>
</div>

Answer 2

pointer-events: none;的文档：

无
该元素永远不是鼠标事件的目标;但是，如果那些后代，鼠标事件可能会以其后代元素为目标将指针事件设置为其他值。在这些情况下，鼠标事件将触发此父元素上的事件侦听器适合在活动期间往返于后代的路上捕获/泡沫阶段。该元素永远不是鼠标的目标事件;但是，鼠标事件可能会针对其后代元素那些后代将指针事件设置为其他值。 In 在这些情况下，鼠标事件会触发事件监听器父元素在往返于后代的途中是合适的在事件捕获/泡沫阶段。

https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events

请注意上面添加的重点。

因此，如果你设置了后代，后代应该仍然有这些事件：

.offline .delete {
  pointer-events: auto;
}

Answer 3

鉴于此：

div.offline:not(.delete) {
  pointer-events: none;
}

您定位div的课程offline，其中没有课程delete。

由于您的唯一div没有delete课程，因此会定位。

要定位没有div.offline类的delete的所有后代元素，您可以这样做：

div.offline :not(.delete) {  //note the space before ":not"
  pointer-events: none;
}

然而，这排除了文本节点。因此，“some text”和delete按钮仍然会收到指针事件。

您唯一的选择是为父级创建一个默认样式，该样式由子项覆盖：

div.offline {
  pointer-events: none;
}

div.offline .delete {
  pointer-events: auto;
}

css3指针事件不在孩子身上？

3 个答案: