CODEWITHSUNDEEP
javascriptjqueryonclick
Santiago
Santiago

Reputation: 2455

Make an entire <li> element clickable, but don't trigger the link when clicking inside links

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:

(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)

Upvotes: 4

Views: 3650

Answers (2)

Robert
Robert

Reputation: 21388

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/

Upvotes: 3

Gregg
Gregg

Reputation: 35864

Here's one way. Tested on jsfiddle.net and it worked for me. 

$('li').click(function() {
    window.location = $(this).find(':first-child').attr('href');
});​​​​​​​​​

As far as the alt key goes, I'm not sure that's possible. I'd let the user decide if they want to open a link in a new tab/window anyway.

Upvotes: 4

Related Questions