Cliquez sur <li> de <ul onclick>

En tant que débutant relatif avec JS, j'ai du mal à essayer de trouver une solution à cela.

J'ai besoin de savoir quelle ligne d'une liste non ordonnée a été cliquée

<ul onclick="alert(this.clicked.line.id);"> <li id=l1>Line 1</li> <li id=l2>Line 2</li> <li id=l3>Line 3</li> </ul>

Je ne veux vraiment pas ajouter un événement onclick à chaque ligne individuelle, je suis sûr qu'il doit y avoir un moyen ??

Vous pouvez utiliser event.target pour ceci:

JS:

 // IE does not know about the target attribute. It looks for srcElement // This function will get the event target in a browser-compatible way function getEventTarget(e) { e = e || window.event; return e.target || e.srcElement; } var ul = document.getElementById('test'); ul.onclick = function(event) { var target = getEventTarget(event); alert(target.innerHTML); };

HTML:

 <ul id="test"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul>

Exemple: http://jsfiddle.net/ArondeParon/2dEFg/5/

Notez qu'il s'agit d'un exemple très simple et que vous rencontrerez probablement des problèmes lors de déléguer des événements à des éléments contenant plus d'un niveau. Lorsque cela se produit, vous devrez traverser l'arbre DOM vers le haut pour trouver l'élément contenant.

L'objet qui a effectivement été cliqué est

 event.target

À l'intérieur du rappel de l' onclick . Ce que vous essayez de faire, c'est une bonne idée, et il s'agit d'une délégation d'événement .

http://jsfiddle.net/VhfEh/

Vous pouvez utiliser event.target pour ceci:

Je ne semblais pas fonctionner, donc j'ai fait un petit changement semble fonctionner maintenant.

 var ul = document.getElementById('test'); ul.onclick = function(event) { var target = event.target; alert(event.target.innerHTML); };

// Le moyen le plus simple de le faire pourrait être d'ajouter un paramètre de requête à vos liens:

 <ul> <li><a href="Line 1">Line 1</a></li> <li><a href="Line 2">Line 2</a></li> <li><a href="Line 3">Line 3</a></li> </ul>