web-dev-qa-db-fra.com

Obtenir cliqué <li> à partir de <ul onclick>

En tant que débutant relatif à JS, je me bats pour essayer de trouver une solution à ce problème.

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

javascripthtmlhtml-lists
18
crankshaft

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 qu'il s'agit d'un exemple très basique et que vous rencontrerez probablement des problèmes lorsque vous déléguez des événements à des éléments contenant plusieurs niveaux. Dans ce cas, vous devrez parcourir l'arborescence DOM vers le haut pour rechercher l'élément contenant. 

37
Aron Rotteveel

L'objet sur lequel vous avez réellement cliqué est

event.target

dans le rappel onclick. Ce que vous essayez de faire est une bonne idée. On l'appelle délégation d'événements .

http://jsfiddle.net/VhfEh/

3
Andrea

// Le moyen le plus simple de faire cela 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>
2
Dhaval Rajpara

Vous pouvez utiliser event.target pour cela:

Ne semblait pas fonctionner alors 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);
};
2
axio

Si vous voulez la valeur exacte de element, le code suivant peut fonctionner. Utilisez innerText sauf innerHTML JS:

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.innerText);
};

HTML:

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

1
Rohit Parte