可点击的LI否决了LI内的链接

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

我发现一个问题simular这里，但它似乎并没有解决我的问题。 jQuery DIV click, with anchors

你能帮助我吗？ :-)

预先感谢您...

来源

2010-04-13 curly_brackets

这是不好的做法，并不是逐步增强网页，只是你知道。 – 2010-04-13 12:14:04

您遇到的问题是由event propagation造成的。单击< a/>标记将标记最多标记为< li/>标记，因此会导致li的click事件“取代”链接的点击。

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

我建议使用event.stopPropagation()在< A/>标签，就像这样：

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

来源

2010-04-13 10:02:01 GeReV

这个解决方案像一个魅力工作，并与最少的代码 - 因此，这是我接受的解决方案... :-) – 2010-04-13 12:23:37

使用事件目标，如：

$("#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; 
     } 
    } 
});

来源

2010-04-13 07:20:51 jAndy

我无法让它工作安迪。 “case'div'：{”做什么？我应该把“window.location = $（this）.attr（”url“）;”你在哪里写过“做某事”？你能插入我的信息如上，以更好地说明你的想法？ – 2010-04-13 07:48:52

我其实已经这样做了。您可以删除'DIV'部分，这只是'nodeName'可以包含任何DOM元素的示例。对你来说有趣的部分是'A'封闭。应该做这项工作。 – jAndy 2010-04-13 08:17:43

Doh，我其实首先不明白。我编辑了现在应该做的伎俩的代码。但要小心，使用自定义属性标记可能会导致一些麻烦。 – jAndy 2010-04-13 12:08:20

可你只需要改变的标记了这个，而不是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>

来源

2010-04-13 09:15:58 XGreen

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

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

这看着你点击什么，如果它不是在列表元素上的url属性，它看起来的链接。如果它是一个链接，它会正常链接。

来源

2010-04-13 11:20:58 wombleton

可点击的LI否决了LI内的链接

回答

相关问题