javascript - 在 JQuery 中执行 Parent div 方法而不是 Childs

Question

我的 html 中有以下结构:

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

我的每个类上还有两个 jQuery click() 操作:

$('.parent').click(function() {
    //Methods Set 1
});

$('.child').click(function() {
    //Methods Set 2
});

假设 css 非常简单，只需能够单击 div。

现在我的问题如下:如何在.child类中设置jQuery操作来执行方法集2但不是 之后执行方法集1？

我期望看到什么:

当用户单击.parent类时，它只会执行属于该操作调用的第一组方法。

当用户单击 .child 类时，它将仅执行属于该操作调用的第二组方法。

我的代码发生了什么:当用户单击parent 类时，将调用第一个 set 方法。 [确定]

当用户点击.child类时，首先执行Methods Set 2，然后调用Set Method 1并执行他们。 [失败]

到目前为止我尝试过什么:

对我来说，这是一个不那么简单的问题，它让我远离了我的许多想法，并迫使我多次改变我的计划。

1. 我尝试设置 .not() method在我的 .parent 选择器中，如下所示:

   $('.parent').not('.child').click(function() {
       //Methods Set 1
   });
   

   但即使我的控制台中没有出现任何错误(我在 Firefox 中使用 firebug 来调试日志)，我也没有得到预期的结果。

2. 我也尝试了 :not() Selector在我的 .parent 类中，但也没有得到我预期的结果。

   $('.parent:not(.child)').click(function() { /*Methods Set 1 */});
   

Answer 1

使用 stopPropagation() 函数。 see here

$('.parent').click(function() {
//Methods Set 1
});

$('.child').click(function(event) {
    event.stopPropagation();  
//Methods Set 2
});