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