Question

我想阻止click事件传播到父元素。这是HTML代码。

<div style="cursor: pointer; display: inline-block; float: right" onclick="if (confirm('Continue?')) { jQuery(this).children().click(); }">
  <button style="float: right; pointer-events: none;" class="form-submit-bold btn btn-default form-submit" id="edit-submit-password" name="op" value="Save Password" type="submit">Save Password</button>
</div>

并已将此jquery事件附加到控制台中的按钮元素

jQuery($0).on('click', function(e) {
  alert('hi');
  console.log(e);
  e.stopPropagation();
});

现在，当我使用jQuery($0).click();单击按钮元素时，此警报为“ hi”，但随后再次显示应在单击div时触发的警报。我想停止这个。为什么stopPropagation不起作用？

Answer 1

删除pointer-events，将其设置为none，这可能是我发现的原因

该元素永远不会是指针事件的目标；但是，如果指针后代的指针事件设置为其他值，则指针事件可以将其后代元素作为目标。在这种情况下，在事件捕获/冒泡阶段，指针事件将在该父元素上往/后代的方式触发事件监听器。

$('button').on('click', function(e) {
e.stopPropagation()
  alert('hi I am child');
  console.log(e.target);
});

div {
  cursor: pointer; display: inline-block; float: right;
}
button {
  float: right;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div onclick="alert('Hi I am parent')">
<button>
hit me
</button>
</div>

查看您的问题

jQuery('button').on('click', function(e) {
  alert('hi');
  console.log(e);
  e.stopPropagation();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="cursor: pointer; display: inline-block; float: right" onclick="if (confirm('Continue?')) { jQuery(this).children().click(); }">
  <button style="float: right;" class="form-submit-bold btn btn-default form-submit" id="edit-submit-password" name="op" value="Save Password" type="submit">Save Password</button>
</div>

为什么我的事件传播没有停止？

1 个答案: