指针事件：没有一个不适用于子元素

Posted 2023-02-24

【中文标题】指针事件：没有一个不适用于子元素

【英文标题】：Pointer-events: none not working on child element

【发布时间】：2016-08-25 10:10:00

【问题描述】：

我有这个设置 (https://jsfiddle.net/Lxcmcrx3/3/)，我希望能够点击标签。但是在标签 (.child) 上设置 pointer-events: 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>

CSS

.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;

这是为什么呢？

将pointer-events: none 移动到.parent 确实有效，但这不是我能做的。有没有办法强制 .child 上的指针事件？

【问题讨论】：

为什么不将您的活动附加到父容器？ jsfiddle.net/Lxcmcrx3/5 或者这与未来的变化有冲突吗？

@N.J.Dawson 也不是一个选项，标签 (.child) 是在多种情况下添加的独立组件，因此无论它们处于何种情况都应该工作/表现（点击它们）用于，甚至独立于.parent。

我不知道怎么做。您正在点击标签，但只能点击到 他们的父级。 由于您不能将 pointer-events: none 应用于父级，我认为您陷入了僵局（当然，禁止使用 javascript）。跨度>

@Paulie_D 恐怕你是对的。从技术上讲，它确实按设计工作。我必须找到一种方法将指针事件放在 .parent 上以获得所需的结果。

【参考方案1】：

如果我理解正确，您想通过不注册鼠标点击的.child 来点击.parent？您可以通过在事件链中将event.target（实际点击的元素，即.parent）与event.currentTarget（触发其事件侦听器的元素，即.container）隔离开来。

在演示中，一个按钮可以切换pointer-events 的.child 属性。结果应该如下：

如果.child 有pointer-events: none，那么event.target 就是.parent 如果.child 有pointer-events: auto，那么event.target 就是.child。

FIDDLE

片段

$('.container').on('click', function(e) 
  if (e.target !== e.currentTarget) 
    var tgt = e.target.className;
    alert(tgt + ' is clicked.');
  
);
$('#btn').on('click', function() 
  $('.child').toggleClass('on off');
);

.container 
  position: relative;
  padding: 10px;
  margin: 50px auto;
  background: white;
  width: 200px;

.parent 
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 20px;

.child 
  background: rgba(255, 255, 255, 0.7);
  padding: 5px;
  margin-bottom: 5px;

.on 
  pointer-events: auto;

.on:after 
  content: 'auto';
  color: blue;

.off 
  pointer-events: none;

.off:after 
  content: 'none';
  color: red;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id='btn'>
  Child PointerEvents</button>
<div class="container">
  <img class='image' src="https://unsplash.it/200/200" />
  <div class="parent">
    <div class="child off">
      Label text
    </div>
    <div class="child off">
      Label text
    </div>
  </div>
</div>