可点击的 LI 覆盖 LI 中的链接答案

【问题标题】：Clickable LI overrules links within the LI可点击的 LI 覆盖 LI 中的链接
【发布时间】：2010-04-13 07:13:51
【问题描述】：

我有一个包含一些信息的 LI，包括一些链接。我希望 jQuery 使 LI 可点击，但也保留 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

你能帮帮我吗？ :-)

提前谢谢你...

【问题讨论】：

这是一种不好的做法，并且不会逐步增强网页，你知道的。

标签： javascript jquery jquery-ui

【解决方案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;
       }
   }
});

【讨论】：

我无法让它工作安迪。 “案例'div'：{”有什么作用？我应该把“window.location = $(this).attr("url");”你在哪里写了“做某事”？你能插入我上面的信息，更好地说明你的想法吗？
我实际上已经这样做了。您可以删除“DIV”部分，这只是“nodeName”可以包含任何 DOM 元素的示例。对您来说有趣的部分是“A”闭包。应该做的工作。
哎呀，其实我一开始就不明白。我编辑了现在应该可以解决问题的代码。但要注意，使用自定义属性标签可能会带来一些麻烦。

【解决方案2】：

您遇到的问题是由event propagation 引起的。标签上的点击会冒泡到

标签，因此会导致 li 的 click 事件“推翻”链接的点击。

基本上，li 的点击发生在点击链接之后立即。这就像您单击了一个指向一个站点的链接，然后在浏览器有机会更改页面之前单击了一个指向另一个站点的链接。
解决这个问题的方法是阻止事件冒泡到

，从而防止它改变窗口的位置。

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

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

【讨论】：

这个解决方案就像一个魅力，并且使用最少的代码 - 因此这是我接受的解决方案...... :-)

【解决方案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>

【讨论】：

【解决方案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 属性。如果它是一个链接，它会执行正常的链接操作。

【讨论】：