制作一个完整的< li>元素可单击，但在单击内部链接时不要触发链接 [英] 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.

我有类似这样的东西：

<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键，链接将在新标签中打开...就像任何其他链接一样。但我不知道是否可能）

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

推荐答案

您可能还对 event.stopPropagation（）感兴趣。这将允许您防止事件冒泡（也通知点击的 li ）。

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/

这篇关于制作一个完整的< li>元素可单击，但在单击内部链接时不要触发链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！