Question

I got an html page like this:

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

Now, I want to use the jQuery click method but should only work when clicking first, not second. But if doing something like

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

If I click inside the second, its like clicking also on the first and the above function will run. Can I avoid this? So, clicking in second, won’t run the above function of the first?

Answer 1

Yes you can!

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

That will stop propagation to elements “above” in the tree.