web-dev-qa-db-ja.com

<ul onclick>からクリック<li>を取得

JSの比較的初心者として、私はこれに対する解決策を見つけるのに苦労しています。

順不同リストのどの行がクリックされたかを調べる必要があります

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

個々の行にonclickイベントを追加したくないので、方法があるはずです。

javascripthtmlhtml-lists
22
crankshaft

これにはevent.targetを使用できます。

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>

例：http://jsfiddle.net/ArondeParon/2dEFg/5/

これは非常に基本的な例であり、複数のレベルを含む要素にイベントを委任するといくつかの問題が発生する可能性があることに注意してください。これが発生した場合、DOMツリーを上方向に走査して、含まれている要素を見つける必要があります。

41
Aron Rotteveel

実際にクリックされたオブジェクトは

event.target

onclickコールバック内。あなたがやろうとしていることは良いアイデアであり、それは イベント委任 として知られています。

http://jsfiddle.net/VhfEh/

3
Andrea

//これを行う最も簡単な方法は、クエリパラメータをリンクに追加することです。

<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

これにはevent.targetを使用できます。

動作していないように見えたので、小さな変更を加えて動作しているようです。

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

要素の正確な値が必要な場合は、次のコードが機能します。innerHTMLJSを除くinnerTextを使用します。

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