Le LI cliquable annule les liens dans le LI

Question

J'ai un LI avec quelques informations, y compris des liens. Je voudrais que jQuery fasse le LI cliquable, mais reste aussi les liens dans le LI.

La partie Clicable fonctionne. J'ai juste besoin des liens internes pour fonctionner aussi bien.
REMARQUE: Ils fonctionnent si vous faites un clic droit et choisissez "Ouvrir dans un nouvel onglet".

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

J'ai trouvé une question Simular ici, mais il ne semble pas résoudre mon problème. jQuery DIV click, with anchors

Pouvez-vous m'aider? :-)

Merci à l'avance ...

Answer 1

Le problème que vous rencontrez est dû à event propagation. Le clic sur la balise < a/> génère une bulle jusqu'à la balise < li/>, provoquant ainsi l'annulation de l'événement click de li par le clic du lien.

Essentiellement, le clic de li se produit immédiatement après avoir cliqué sur le lien. C'est comme si vous aviez cliqué sur un lien vers un site, puis cliqué sur un lien vers un site différent avant que le navigateur ne puisse changer de page.
Une solution à cela serait d'empêcher l'événement de bouillonner jusqu'à < li/>, l'empêchant ainsi de changer l'emplacement de la fenêtre.

Je suggère d'utiliser event.stopPropagation() sur la <un/tag>, comme ceci:

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

Answer 2

Utilisez la cible de l'événement, comme:

$("#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 3

Pouvez-vous changer simplement la marque à cela et ne pas écrire js pour cela?

<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

Comme l'a dit @GeReV, c'est la propagation des événements.

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

Cela ressemble à ce que vous avez cliqué et si ce n'est pas un lien, il regarde l'attribut url sur l'élément de la liste. Si c'est un lien, il fait son lien normal.