javascript - 使整个 元素可点击，但在点击内部链接时不触发链接

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 中的“Something”:转到 www.something.com(不要转到 www.link.com)

(我不知道这是否可行，但如果我可以单击 LI 元素并且按住键盘上的“alt”键，链接将在新选项卡中打开，那就太好了...就像任何其他链接一样。但我不知道这是否可能)

Answer 1

这是一种方法。在 jsfiddle.net 上测试过，它对我有用。

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

就 alt 键而言，我不确定是否可行。我会让用户决定他们是否要在新选项卡/窗口中打开链接。