javascript - 选择元素内的元素

Question

这是我的 DOM:

<div class="a">
    <div class="b">b</div>
    <div class="c">c</div>
</div>

JS:

$('div.a').on('click',function(){
     // ....add a div append to div.a
});
$('div.b').on('click',function(){
     //....edit the content of element
});

单击div.a 将在div.a 中添加另一个div(d、e、f 等)。点击div.b、div.c或里面的其他div，将编辑div.b的内容。我怎样才能做到这一点？

如果我点击 div.b，它将加载 div.a 的事件，但不会加载 div.b。

Answer 1

您需要使用 event.stopPropagation :

$('div.b').on('click',function(e){
    e.stopPropagation();
   //...
});

Prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event.