Сделайте весь элемент <li>кликабельным, но не нажимайте ссылку при переходе по ссылкам внутри

Question

Последние несколько дней я искал решение, но я не нашел именно то, что искал.

У меня есть что-то вроде этого:

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

Что мне нужно:

• Нажмите на элемент LI: перейдите на www.link.com
• Нажмите «Что-то» внутри LI: Перейдите на www.something.com (И НЕ Зайдите на www.link.com)

(И я не знаю, возможно ли это, но было бы здорово, если бы я мог нажать на элемент LI и если бы яудерживая клавишу «alt» на клавиатуре, ссылка откроется в новой вкладке ... как и любая другая ссылка. Но я не знаю, возможно ли это)

Answer 1

Вас также может заинтересовать event.stopPropagation().Что позволит вам предотвратить всплытие события (он же уведомляет li о клике).

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

http://jsfiddle.net/erF3S/

Answer 2

Вот один из способов. Протестировано на jsfiddle.net и у меня это сработало.

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

Что касается клавиши alt, я не уверен, что это возможно. Я бы позволил пользователям решить, хотят ли они в любом случае открыть ссылку в новой вкладке / окне.