从 <ul onclick> 获得点击 <li>答案

【问题标题】：Get Clicked <li> from <ul onclick>从 <ul onclick> 获得点击 <li>
【发布时间】：2011-02-25 11:55:59
【问题描述】：

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

【问题讨论】：

您是否尝试过在 onclick 事件上设置断点并检查 this.clicked 对象？

标签： javascript html html-lists

【解决方案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 树才能找到包含的元素。

【讨论】：

+1 这里的关键是将 Javascript 从 HTML 属性中取出。
这是正确的，只要 li 中没有其他元素。当您拥有
Item 1

是否也可以将所有鼠标事件添加到一个元素，然后在处理函数中确定它是什么事件？？

@crankshaft 不，你必须手动绑定每个事件（这也让你的代码更容易理解）

嗯，在 IE 中似乎不起作用，我收到错误：错误：'target' is null or not an object

【解决方案2】：

实际被点击的对象是

event.target

在onclick 回调中。您正在尝试做的是一个好主意，它被称为event delegation。

http://jsfiddle.net/VhfEh/

【讨论】：

如果您不关心 IE8 的简单解决方案。

【解决方案3】：

您可以为此使用 event.target：

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

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

【讨论】：

【解决方案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>

【讨论】：

【解决方案5】：

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

【讨论】：

答案是“window.event.target”。谢谢你好先生。