Get Cliqué & lt; li & gt; à partir de & lt; ul onclick & gt;

Comme un débutant avec JS, je me bats pour essayer de trouver une solution à cette question.

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

<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 n'ai pas vraiment envie d'ajouter un événement onclick pour chaque ligne, je suis sûr qu'il doit y avoir un moyen ??

source d'informationauteur crankshaft

  1. 30

    Vous pouvez utiliser event.target pour cela:

    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/

    Veuillez noter que ceci est un exemple très simple et vous serez susceptibles de rencontrer des problèmes lorsque vous déléguez des événements pour les éléments contenant plus d'un niveau. Lorsque cela se produit, vous devrez parcourir l'arborescence DOM vers le haut pour trouver l'élément conteneur.

  2. 3

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

    event.target

    à l'intérieur de la onclick de rappel. Ce que vous essayez de faire est une bonne idée, et il est connu comme événement délégation.

    http://jsfiddle.net/VhfEh/

  3. 1

    Vous pouvez utiliser l'événement.cible pour cette:

    Ne semble pas fonctionner donc j'ai fait une petite modification semble fonctionner maintenant.

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

    //Le moyen le plus simple pour ce faire pourrait être d'ajouter un paramètre de requête pour 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>