événement parent tir élément imbriqué

Question

j'ai un jsp qui génère la structure HTML suivant:

<ul class="folders" id="yui_patched_v3_11_0_1_1410259364795_727"> 
    <li class="folder" style="cursor: pointer;" id="yui_patched_v3_11_0_1_1410259364795_726"> 
     <i class="fa fa-plus"></i> <i class="fa fa-folder"></i> Prueba 1 
     <ul class="files" style="display: block;"> 
      <li class="file"> <a href="/documents/10184/10675/welcome_tools" target="_blank" class="link"> <i class="fa fa-file"></i> welcome_tools </a> </li> 
      <li class="file"> <a href="/documents/10184/10675/welcome_learn" target="_blank" class="link"> <i class="fa fa-file"></i> welcome_learn </a> </li> 
      <li class="file"> <a href="/documents/10184/10675/welcome_cube" target="_blank" class="link"> <i class="fa fa-file"></i> welcome_cube </a> </li> 
      <li class="file"> <a href="/documents/10184/10675/welcome_community" target="_blank" class="link"> <i class="fa fa-file"></i> welcome_community </a> </li> 
     </ul> 
     <ul class="folders" id="yui_patched_v3_11_0_1_1410259364795_725" style="display: block;"> 
      <li class="folder" style="cursor: pointer;" id="yui_patched_v3_11_0_1_1410259364795_724"> 
       <i class="fa fa-folder-open-o"></i> Sub 1 
       <ul class="files" style="display: block;"> 
        <li class="file"> <a href="/documents/10184/10707/helpful_links_for_using_liferay_portal" target="_blank" class="link"> <i class="fa fa-file"></i> helpful_links_for_using_liferay_portal </a> </li> 
       </ul> 
       <ul class="folders" style="display: block;" id="yui_patched_v3_11_0_1_1410259364795_798"> 
        <li class="folder" style="cursor: pointer;" id="yui_patched_v3_11_0_1_1410259364795_797"> 
         <i class="fa fa-folder-open-o"></i> Sub Sub 1 
         <ul class="folders" style="display: block;"> </ul> 
        </li> 
       </ul> 
      </li> 
     </ul> 
    </li> 
</ul> 

Et j'ai le javascript suivant

$("li.folder") 
    .css("cursor", "pointer") 
    .on("click", function(){ 

     $this = $(this); 
     $this.find("ul.files,ul.folders").toggle(200); 

     return false; 
}); 

Pour une fonctionnalité arborescente.

Le problème est chaque fois que je clique sur un a il déclenche l'événement li.folder. Comment puis-je faire en sorte que le lien se comporte comme un lien.

lien Codepen: http://codepen.io/anon/pen/Hokgt

Answer 1

Vous pouvez simplement exclure l'ancre

$("li.folder") 
    .css("cursor", "pointer") 
    .on("click", function(e){ 

     if (! $(e.target).is('a')) { 

      $(this).find("ul.files,ul.folders").toggle(200); 

     } 

     return false; 
}); 

ou aller dans l'autre sens, et arrêter la propagation

$("li.folder a").on('click', function(e) { 
    e.stopPropagation(); 
});