2

我有这个设置（https://jsfiddle.net/Lxcmcrx3/3/），我希望能够点击标签。但是pointer-events: none标签（.child）上的设置不起作用。

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?

4

1 回答 1

3

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

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

  1. 如果.child有pointer-events: none，那么event.target就是.parent
  2. 如果.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>

于 2016-08-25T12:44:42.390 回答