组合div元素结合jQuery

Question

我有一个这样的html页面：

<div id="foo">
  first
  <div>
    second
  </div>
</div>

现在，我想使用jQuery点击方法，但只能在点击first时使用，而不是second。但是，如果做类似

的事情

$("#foo").click(function() { do things });

如果我点击second内部，就像点击first一样，上面的功能也会运行。我可以避免这个吗？因此，点击second，将无法运行first的上述功能？

Answer 1

是的，你可以！

$("#foo div.second").click(function(event) {
    event.stopPropagation();
});

这将停止传播到树中“上方”的元素。

Answer 2

$('#foo').click(function(e) {
    // Do your snazzy stuff.
});

$('#foo div').click(function(e) {
    e.stopPropagation();
});

= OR =

$('#foo').children().click(function(e) {
   e.stopPropagation();
});