Question

我有这个设置（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？

Answer 1

如果我理解正确，您想要通过不注册鼠标点击的.parent点击.child？你可以通过从event.target（触发事件监听器的元素，即.parent）中隔离event.currentTarget（实际点击的元素，即.container）来做到这一点。事件链。

在演示中，一个按钮切换pointer-events的{{1}}属性。结果应如下：

如果.child有.child，则pointer-events: none为event.target
如果.parent有.child，则pointer-events: auto为event.target。

FIDDLE

段

.child

$('.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;
}

指针事件：无法处理子元素

1 个答案:

段