Question

作为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事件，我确定必须有办法？

Answer 1

您可以使用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树以查找包含元素。

Answer 2

实际点击的对象是

event.target

在onclick回调中。你想要做的是一个好主意，它被称为event delegation。

http://jsfiddle.net/VhfEh/

Answer 3

您可以使用event.target：

似乎没有工作，所以我做了一些小改动似乎现在正在工作。

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

Answer 4

//执行此操作的最简单方法可能是在链接中附加查询参数：

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

Answer 5

如果您想要元素的确切值，那么下面的代码可以工作。 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>

从<ul onclick =“”> </ul> </li>获取单击<li>

5 个答案: