使整个元素可单击,但在单击内部链接时不要触发链接

我最近几天一直在寻找解决方案,我并没有真正找到我正在寻找的东西。

我有这样的事情:

  • Title

    Lorem ipsum dolor Something. Etc, blah blah.

我需要的:

  • 单击LI元素:转到www.link.com
  • 点击LI内的“Something”:访问www.something.com(不要访问www.link.com)

(而且我不知道它是否可能,但如果我可以点击LI元素并且如果我在键盘上按住我的“alt”键会很棒,链接会在新标签页中打开…像任何其他链接。但我不知道这是否可能)

您可能还对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/

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

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

至于alt键,我不确定是否可能。 我会让用户决定是否要在新的标签/窗口中打开链接。