Question

I’ve been looking for a solution the last few days, I didn’t really found exactly what I’m looking for.

I have something like this:

<ul>
   <li>
      <a href="http://www.link.com" class="li-url"></a>
      <h1>Title</h1>
      Lorem ipsum dolor <a href="http://www.something.com">Something</a>. Etc, blah blah.
   </li>
</ul>

What I need:

• Click on the LI element: Go to http://www.link.com
• Click on “Something” inside the LI: Go to http://www.something.com (And DON’T go to http://www.link.com)

(And I don’t know if it’s possible, but it would be great if I could click on the LI element and if I’m holding my “alt” key on my keyboard, the link would open in a new tab… like any other link. But I don’t know if that’s possible)

Answer 1

You may also be interested in event.stopPropagation(). Which will allow you to prevent the event from bubbling up (aka notifying the li of the click).

$('ul > li').click(function(e) {
    // Go to link.com
}).children('a').click(function(e) {
    e.stopPropagation();
    // Go to something.com
});

​http://jsfiddle.net/erF3S/