Clickable LI overlaps links in LI

Question

I have a LI with some information, including some links. I would like jQuery to make LI interactive, but also remain links in LI.

Clickable function works. I just need links to work. NOTE. They work if you right-click and select "Open in a new tab."

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

I found a simulated question here, but it doesn't seem to solve my problem. jQuery DIV click, with bindings

Can you help me?: -)

Thanks in advance...

Answer 1

, , . < a/ > < li/ > , li click "" .

, li . , , .
< li/ > , .

event.stopPropagation() < a/ > , :

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

Answer 2

, :

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

Can you just change the character before and not write js for this?

<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

As @GeReV said, this is an event spread.

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

This looks at what you clicked, and if it is not a link, it looks at the attribute urlin the list item. If it is a link, it follows its regular link.