Css 指针事件：无对子元素无效

我有这个设置（），我希望能够点击标签。但是，在标签（.child）上设置

指针事件：none

不起作用

HTML

<div class="container">
  <img src="https://unsplash.it/200/300" />
  <div class="parent">
    <div class="child">
      Label text
    </div>
    <div class="child">
      Label text
    </div>
  </div>
</div>

为什么呢

---

可以将

指针事件：none

移动到

.parent

，但我不能这样做。有没有办法在

.child

上强制执行指针事件？

如果我理解正确，您希望通过查看未注册鼠标单击的

.child

来单击

.parent

？可以通过将事件链中的

事件.target

（实际单击的元素，即

.parent

）与

事件.currentTarget

（触发其事件侦听器的元素，即

.container

）隔离来实现

在演示中，一个按钮切换

.child

的

指针事件

属性。结果应如下所示：

如果

.child

具有

指针事件：无

，则

事件.target

为

.parent

如果

.child

具有

指针事件：auto

，则

事件.target

为

.child

一小条

$（'.container'）。在（'click'，函数（e）上{
如果（e.target！==e.currentTarget）{
var tgt=e.target.className；
警报（已单击tgt+）；
}
});
$（'#btn'）。在（'click'，function（）上{
$（'.child'）.toggleClass（'on-off'）；
});
.container{
位置：相对位置；
填充：10px；
保证金：50px自动；
背景：白色；
宽度：200px；
}
.家长{
位置：绝对位置；
底部：0；
左：0；
填充：20px；
}
.孩子{
背景：rgba（255，255，255，0.7）；
填充物：5px；
边缘底部：5px；
}
.在{
指针事件：自动；
}
.on:之后{
内容：“自动”；
颜色：蓝色；
}
.关{
指针事件：无；
}
.关：以后{
内容：“无”；
颜色：红色；
}

子指针事件
标签文本
标签文本
为什么不将事件附加到父容器？或者这与将来的更改有冲突吗？@N.J.Dawson也不是一个选项，标签（.child）是一个独立的组件，可以在多种情况下添加，因此无论它们在何种情况下使用，都应该工作/运行（单击它们），甚至独立于
.parent
。我不知道如何操作。您正在单击标签，但仅限于其父标签。由于您无法将
指针事件：none
应用于家长，我认为您陷入了僵局（当然除了javascript）。@Paulie\u D恐怕您是对的。从技术上讲，它确实按设计工作。我必须找到一种方法将指针事件放在.parent上以获得所需的结果。
.parent {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 20px;
}

.child {
  background: rgba(255,255,255,0.7);
  padding: 5px;
  margin-bottom: 5px;
  pointer-events: none;
}