it-swarm.dev

Klicken Sie auf <li> von <ul onclick>

Als relativer Anfänger bei JS bemühe ich mich, eine Lösung dafür zu finden.

Ich muss herausfinden, welche Zeile einer ungeordneten Liste angeklickt wurde 

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

Ich möchte nicht wirklich jeder einzelnen Zeile ein Onclick-Ereignis hinzufügen. Ich bin mir sicher, dass es einen Weg geben muss?

18
crankshaft

Sie können event.target dafür verwenden:

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>

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

Bitte beachten Sie, dass dies ein sehr einfaches Beispiel ist, und Sie werden wahrscheinlich auf Probleme stoßen, wenn Sie Ereignisse an Elemente mit mehr als einer Ebene delegieren. In diesem Fall müssen Sie den DOM-Baum nach oben durchlaufen, um das enthaltende Element zu finden. 

37
Aron Rotteveel

Das Objekt, auf das tatsächlich geklickt wurde, ist

event.target

innerhalb des onclick-Rückrufs. Was Sie zu tun versuchen, ist eine gute Idee und wird als event delegation bezeichnet.

http://jsfiddle.net/VhfEh/

3
Andrea

// Am einfachsten ist es, wenn Sie einen Abfrageparameter an Ihre Links anhängen:

<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

Sie können dazu event.target verwenden:

Hat scheinbar nicht funktioniert, also habe ich eine kleine Änderung vorgenommen, die jetzt zu funktionieren scheint.

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

Wenn Sie den genauen Wert des Elements wünschen, kann der folgende Code funktionieren.

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