Question

我有一些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

你帮我吗？： - ）

提前谢谢你......

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;
       }
   }
});

Answer 2

您遇到的问题是由event propagation造成的。点击＆lt; a /＆gt;将气泡标记到＆lt; li /＆gt;标记，因此导致li的click事件“否决”链接的点击。

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

我建议在＆lt; a /＆gt;上使用event.stopPropagation()标签，像这样：

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

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>

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

这会查看您单击的内容，如果它不是链接，则会查看list元素上的url属性。如果它是一个链接，它就会正常链接。

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

4 个答案: