避免在下面绝对定位的元素上发生单击事件

Question

我有 2 个元素，一个父元素及其子元素，并且两者都是绝对定位的。

我为每个元素都有一个单击处理程序，尽管当我单击子元素时，它后面的父元素也会捕获单击。

如何防止父元素接收点击事件？

Answer 1

如果你想要一个纯CSS解决方案，你可以使用pointer-events: none;。这将确保您的鼠标永远忽略父元素，因此在使用时要小心。

另请注意，这在IE或Opera中不受支持。（或者至少，不是在HTML元素上，只是SVG）

jQuery的替代方案是e.StopPropagation，更多信息可以在这里找到

Answer 2

您可以使用

JQuery 并简单地对父元素进行preventDefault或return false：

$('#parent').click(function() {
    return false;
});
$('#child').click(function() {
    //do something
});