Click event on <a> or <li>?

If you had an LI with an anchor in it and you applied your click event to the LI it would do nothing to prevent the anchor from behaving normally, for example, linking to a specific hash or even off site, if you use the anchor on the click event you can actually prevent the default behavior, which gives you more control:

For example, say you had:

<ul>
  <li><a href="http://www.google.com">Google.com</a></li>
</ul>

and

$('li a').click(function(e) {
  e.preventDefault();
  alert('Test');
});

If you click the anchor, even though it is set to go to Google, in the jQuery we are preventing that default behavior so when clicked it does not leave the site, but the alert still runs. However, if you had the click event only on the LI in this scenario, if you were to click the Google.com link it would take you off site. I imagine that's probably why it was added to the anchor in this case, and not the LI, more control.