Avoid go to link of block element while clicking on link inside

Question

I have a LI element whith a link, and other links inside.

It would be something like this:

jQuery:

$('li').click(function() {
   window.location = $(this).children('a.li-url').attr('href');
});

HTML:

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

The problem is that when I click on "something", It also loads www.link.com (you can see this if you alt+click the something link. It will load something.com in a new tab while loading link.com in your current tab.)

I need to ONLY load something.com when I click on "something"..

Thanks!

Answer 1

try this.preventDefault();

Answer 2

$('li').click(function(e) {
    if (e.target.tagName.toLowerCase() == 'li') {
        window.location = $(this).children('a.li-url').attr('href');
    }
});​

crazy demo

---

_{Welcome to stackoverflow.com
Don't forget to accept an answer}

Answer 3

Add this bit of JS.

$('li a:not(.li-url)').click(function() {
    event.stopPropagation();
});
​

Using my selector or something else to target the other link within the li.