it-swarm.dev

Fai clic <li> da <ul onclick>

Come un parente imparentato con JS, sto lottando per cercare di trovare una soluzione a questo.

Ho bisogno di scoprire quale linea di una lista non ordinata è stata cliccata 

<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>

Non voglio davvero aggiungere un evento onclick a ogni singola riga, sono sicuro che ci deve essere un modo ??

18
crankshaft

Puoi usare event.target per questo:

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>

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

Si noti che questo è un esempio molto semplice e probabilmente incontrerete alcuni problemi quando delegate eventi a elementi contenenti più di un livello. Quando ciò accade, dovrete attraversare la struttura del DOM verso l'alto per trovare l'elemento contenitore. 

37
Aron Rotteveel

L'oggetto che è stato effettivamente cliccato è

event.target

all'interno del callback onclick. Quello che stai cercando di fare è una buona idea, ed è noto come delegazione di eventi .

http://jsfiddle.net/VhfEh/

3
Andrea

// Il modo più semplice per farlo potrebbe essere quello di aggiungere un parametro di query ai tuoi link:

<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

Puoi utilizzare event.target per questo:

Non sembra che funzioni, quindi ho fatto dei piccoli cambiamenti, sembra che ora funzioni.

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

Se vuoi il valore esatto dell'elemento allora il codice seguente può funzionare. Usa innerText eccetto 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