événement.target pointe sur un élément enfant

Question

Lorsqu'un utilisateur clique sur un élément <li> ou sur un élément enfant de celui-ci, je souhaite ajouter une classe à cet élément <li>. Cela fonctionne très bien, mais pour améliorer les performances, j'ai décidé de lier cet événement à l'élément <ul>, de sorte que la dissociation et la liaison de cet événement sont beaucoup plus rapides dans une liste de 1000 <li> -éléments. Le seul changement que je pensais avoir à faire était de remplacer this par event.target MAIS event.target peut également faire référence à un élément enfant d'un élément de liste ou même à un petit-enfant.

Existe-t-il un moyen facile de vérifier que cet élément cible fait partie d'un élément de liste ou dois-je parcourir le chemin de event.target jusqu'à atteindre un élément <li>?

C'est ce que j'avais avant de décider de lier un événement à la balise <ul>, qui fonctionne mais pas assez vite:

$('#list li').mousedown(function(){ 
    $(this).addClass('green'); 
}); 

Et voici ce que j'ai maintenant qui ne fonctionne pas correctement, mousedown sur un élément enfant ne donne pas <li> une autre classname:

$('#list').mousedown(function(event){ 
    if(event.target.nodeName == 'LI'){ 
     $(event.target).addClass('green'); 
    } 
}); 

Je me demande si ma deuxième façon d'y parvenir est plus rapide s'il n'y a pas une solution simple pour vérifier si cet élément cible fait partie d'une liste article ...

Answer 1

Eh bien, vous pouvez faire tout cela avec l'outil jQuery sur:

$('#list li').on('mousedown', function() { 
    $(this).addClass('green'); 
}); 

Vous pouvez lire ce sur fait ici: http://api.jquery.com/on/

Answer 2

Vous devez vérifier s'il existe une étiquette LI dans les parents de l'élément cible.

Tous les cadres communs ont une façon de déterminer cela, il est up() dans le prototype, ancestor() à YUI3, et en regardant les documents JQuery, il semble que cela a un parent() et parents() fonction que vous pouvez utiliser pour cette .

Voir: http://docs.jquery.com/Traversing

ont pas utilisé JQuery, mais je suppose que la vérification de $(event.target).parent('li') est la réponse.