使整个<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内的“Something”：转到www.something.com（不要去www.link.com）

（我不知道是否可能，但如果我按住键盘上的“alt”键点击LI元素，链接将在新标签页中打开...就像其他链接一样。但我不知道这是否可行）

- Santiago

---

你想在一个链接内部再放置另一个链接吗？我想这会导致混乱的用户界面。而且我认为这在CSS中严格来说是不可能的（除非你想逐个包装每个单独的元素与链接）。 - David Thomas

第一个链接实际上没有显示出来，因为它没有文本。您也可以将链接作为LI的属性放置，但我提供的解决方案适用于所提供的HTML。 - Gregg

Answer 1

这里有一种方法。在jsfiddle.net上测试过，对我有效。

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

就alt键而言，我不确定是否可能。无论如何，我会让用户决定他们是否想要在新标签页/窗口中打开链接。

- Gregg

---

如果你贴出 jsFiddle 的链接，通常会被视为一件好事。+1 - David Thomas

谢谢Gregg。那个工作得很好，只是当我点击“something”时，它也会跳转到link.com。（如果您使用alt +单击，新标签页将转到您的click something.com，但当前标签页将转到link.com） - Santiago

为什么要使用 .find(':first-child') 而不是 .find('a') ？ - shikata

Answer 2

你可能也会对 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/

- Robert

---

似乎它不起作用。当我点击“li”时，它没有跳转到link.com。 - Santiago

抱歉，我假设您了解一些Javascript。在我的注释位置添加window.location =“ADDRESSHERE”;。将ADDRESSHERE替换为您想要转到的网站URL。 - Robert