可点击的LI优先于LI内的链接。

Question

我有一个包含一些链接的LI元素。我希望使用jQuery使这个LI元素可点击，但是其中的链接也可以正常工作。

可点击部分已经实现了，现在我只需要让其中的链接也能够正常工作。
注意：如果您右键单击并选择“在新标签页中打开”，它们将正常工作。

HTML

<ul id="onskeliste">
    <li url="http://www.dr.dk">Some info with links <a href="http://www.imerco.dk" target="_blank">Imerco</a></a>
</ul>

jQuery

$(document).ready(function() {
 $("#onskeliste li").click(
 function()
 {
  window.location = $(this).attr("url");
  return false;
 });

})(jQuery);

我在这里找到了一个类似的问题，但它似乎不能解决我的问题。jQuery DIV click, with anchors 你能帮我吗？ :-)

提前感谢你...

- curly_brackets

---

这是不好的做法，也不是逐步增强网页的方式，你知道吗。 - Will Morgan

Answer 1

使用事件目标，例如：

$("#onskeliste li").bind('click', function(e){
   switch(e.target.nodeName){
       case 'LI':{
           e.preventDefault();
           e.stopPropagation();
           window.location = $(e.target).attr('url');
           break;
       }
       case 'A':{
           // do something               
           break;
       }
   }
});

- jAndy

---

我无法让它工作，安迪。 "case 'div'：{"是做什么用的？我应该将"window.location = $（this）.attr（“url”）;"放在你写的"Do something"的位置吗？您能够插入我的信息以更好地阐述您的想法吗？ - curly_brackets

我已经做过了。你可以删除'DIV'部分，它只是一个例子，'nodeName'可以包含任何DOM元素。对你来说有趣的部分是'A'闭包。应该可以完成工作。 - jAndy

哦，我一开始实际上没理解。我修改了代码，现在应该可以了。但要注意，使用自定义属性标签可能会引起一些麻烦。 - jAndy

Answer 2

你遇到的问题是由事件传播引起的。 单击标签会冒泡到

标签，因此导致li的click事件“覆盖”链接的点击。

基本上，在单击链接后，li的点击会立即发生。就像在浏览器有机会更改页面之前，您已单击了一个站点的链接，然后单击了另一个站点的链接一样。
解决此问题的方法是阻止事件冒泡到<li/>，从而防止其更改窗口位置。

我建议在标签上使用event.stopPropagation()，如下所示：

$('#onskeliste li a').click(function(e) {
    e.stopPropagation();
});

- GeReV

---

这个解决方案非常好用，且代码量最少 - 因此这是我接受的解决方案... :-) - curly_brackets

Answer 3

你能否只更改标记而不为此编写js代码？

<ul id="onskeliste">
    <li>
        <a href="http://www.dr.dk">Some info with links</a>
        <a href="http://www.imerco.dk" target="_blank">Imerco</a></a>
    </li>
</ul>

- makeitmorehuman

Answer 4

正如@GeReV所说，这是事件传播。

$(document).ready(function() {
  $('#onskeliste li').click(function(e) {
    if ($(e.target).is(':not(a)')) {
      window.location = $(this).attr('url');
      return false;
    }
  });
 })(jQuery);

这段代码会检查你点击的内容，如果它不是一个链接，它会查看列表元素上的url属性。如果它是一个链接，它会执行正常的链接操作。

- wombleton