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

Question

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

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

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

Answer 1

如果您需要纯CSS解决方案，可以使用pointer-events: none;。这将确保你的鼠标忽略父元素，所以在使用它时要小心。

另请注意，这是IE或Opera中的NOT SUPPORTED。 （或者至少，不是HTML元素，只是SVG）

jQuery替代方案是e.StopPropagation，可以找到更多信息here

Answer 2

你可以使用JQuery，而且在父元素上有一个preventDefault或return false：

$('#parent').click(function() {
    return false;
});

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