尝试使用 jQuery 定位特定的 DIV

Question

看似简单的问题却很难解决。

我有一个 DIV 包装器，其 z 索引低于包装器内的 DIV。 （基本上是一个上面有 DIV 的背景）

当我在包装器和 DIV 上运行 console.log() 时，我注意到当我单击包装器时，它只记录包装器的单击。

但是，当我单击包装器内的 DIV 时，它会同时记录包装器和 DIV 的单击。

我到底该如何设置，以便当我单击包装器内的 DIV 时，它只会注册对该 DIV 而不是包装器的单击？

Answer 1

扩展杰夫的答案，这里有一些基本的示例代码：

<style type="text/css">
    div {width:100px;height:100px;}
    #parent {padding:50px;background-color:black}
    #child {background-color:yellow}
</style>

<script type="text/javascript">
    $(function () {
        $('div').click(function (event) {
            if ($(this).parents('div')) {
                event.stopPropagation();
            }
            console.log($(this).attr('id'));
        });
    });
</script>

<div id="parent">
    <div id="child"></div>
</div>

Answer 2

您将需要使用 stopPropagation。有关详细信息，请参阅此内容：

event.preventDefault() 与 return false