jQuery li: a (ul) numéro de sélecteur

Je créais un arbre en utilisant la liste UL LI et jQuery. J'ai utilisé un sélecteur jQueryjQuery li: a (ul) numéro de sélecteur

jQuery (li: has (ul)) pour trouver tous les noeuds de liste ayant des enfants, puis ajouté un événement click.

jQuery(li:has(ul)).click(function(event) { 

    jQuery(this).children.toggle(); 
    jQuery(this).css("cursor","hand"); 

});

Cela fonctionne pour moi sauf que je ne comprends pas pourquoi je reçois une main du curseur et cliquez sur événement déclencheur même lorsque je prends le pointeur de la souris pour Childs de ma sélectionnée li

 

<li> Parent // it works here that is fine 
<ul> 
<li> child1 // it works here i dont understand need explanation 
</li> 
<li> child2 // it works here i dont understand need explanation 
</li> 
</ul> 
</li>

Source

2010-05-31 sushil bharwani

ce que vous voyez bouillonne d'événements. Lorsque vous cliquez sur un élément descendant, l'événement se répercute également sur ses ancêtres. Votre gestionnaire de clic sur l'élément ancêtre est ce qui est déclenché. Si vous ne le souhaitez pas, vous devez également arrêter la propagation des événements dans les gestionnaires de clic des éléments enfants afin d'éviter que l'événement ne se répande.

jQuery(li:has(ul)).children().find('li').click(function(e) { 
    e.stopPropagation(); 
});

Source

2010-05-31 14:51:38 tvanfosson

semble être un concept intéressant; juste besoin d'un peu plus de perspicacité, même quand il n'y a pas d'événement de clic est défini sur l'enfant, comment est-il bouillonnant. Pouvez-vous me suggérer une ressource où je peux en lire plus? –

@sushil - Vous confondez l'événement avec le gestionnaire d'événements que vous créez. L'événement se produit, dans ce cas lorsque l'utilisateur clique sur la souris, s'il y a un gestionnaire pour faire quelque chose à ce sujet ou non. Qu'est-ce que vous faites est de créer un peu de code qui sera exécuté lorsque l'événement se produit. Vous pouvez commencer par http://www.quirksmode.org/js/introevents.html ou w3schools.com: http://www.w3schools.com/jsref/dom_obj_event.asp est également une bonne référence. – tvanfosson

merci beaucoup pour cette idée. –

La propriété cursor et la click Les événements sont hérités par les enfants de l'élément.

Pour éviter que la cursor propriété d'être héritée, vous pouvez ajouter une règle CSS qui définit explicitement le curseur pour les éléments <ul> et <li>, comme ceci:

ul, li { 
    cursor: default; 
}

Pour éviter l'événement de clic de tir pour les enfants , vous pouvez vérifier event.target, comme ceci:

if (event.target !== this) return;

Source

2010-05-31 14:49:51 SLaks

grâce; il hérite également de l'événement clic je veux dire je peux cliquer sur les enfants aussi pour basculer a-t-il la même explication ainsi –

pouvez-vous s'il vous plaît élaborer cette ligne si (event.target! == this) retour; Je le vois fonctionner mais je n'ai pas compris exactement ce qu'il fait –

'e.target' est l'élément qui a déclenché l'événement. 'this' est l'élément auquel vous avez lié le gestionnaire. – SLaks

oui essayer

jQuery('ul',this).css("cursor","hand !important"); .// pour le dire d'appliquer le curseur sur les éléments ul avec « ce » i.e. l'élément li d'origine

Source

2010-05-31 14:52:41 RobertPitt

jQuery li: a (ul) numéro de sélecteur

Répondre

Questions connexes