尝试使用 jQuery 定位特定的 DIV答案

【问题标题】：Trying to target specific DIV with jQuery尝试使用 jQuery 定位特定的 DIV
【发布时间】：2011-08-09 20:54:41
【问题描述】：

看似非常困难的解决方案的简单问题。

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

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

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

我该如何设置，以便当我点击包装器内的 DIV 时，它只会为该 DIV 注册一次点击，而不是包装器？？

【问题讨论】：

标签： jquery select html click target

【解决方案1】：

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

<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>

【讨论】：

虽然这个解决方案确实解决了这个问题，但它会杀死我的包装器 DIV 上的所有点击。基本上我只希望子 DIV 在您单击它时注册该 DIV 的单击，并且只希望父 DIV 在我单击父 DIV 时注册单击。此解决方案会杀死包装器 DIV Thoughts 的点击识别？
没关系，我想通了。我放错地方了。再次感谢您的帮助！非常感谢！
@Alex：是的，你肯定想缩小你的选择器。使用div 作为选择器几乎从来都不是一个好主意，但对于这个基本场景来说，它似乎是相关的。

【解决方案2】：

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

event.preventDefault() vs. return false

【讨论】：