javascript - 如何在不提醒其父级 ID 的情况下提醒嵌套 div 的 ID？

Question

我想在单击它时提醒 div 的 id。该代码工作正常，但它也提醒父 div 的 id。我怎样才能避免这种情况？

这是代码：JSBin 链接

<div id ="parentDiv">
  <div id ="child1"></div>
  <div id ="child2"></div>
</div>

jQuery代码：

$(document).ready(function(){
  $('div').click(function(){
   var index = $(this).attr("id");
   alert(index);
  });
});

Answer 1

利用e.stopPropagation()

$('div').click(function(e){
   e.stopPropagation();
   var index = $(this).attr("id");
   alert(index);
});

演示---> http://jsbin.com/osafuw/1/edit

• http://api.jquery.com/event.stopPropagation/

Answer 2

children()你也可以使用

$(document).ready(function(){
    $('div').children().click(function(){
    var index = $(this).attr("id");
    alert(index);
  });
});