Javascript 从 <ul onclick> 获得点击 <li>
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5116929/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Get Clicked <li> from <ul onclick>
提问by crankshaft
As a relative beginner with JS, I am struggling to try and find a solution to this.
作为 JS 的相对初学者，我正在努力尝试找到解决方案。
I need to find out which line of an unordered list was clicked
我需要找出无序列表的哪一行被点击
<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>
I don't really want to add a onclick event to each individual line, I'm sure there must be a way ??
我真的不想为每一行添加一个 onclick 事件，我确定一定有办法吗？？
回答by Aron Rotteveel
You can use event.targetfor this:
您可以event.target为此使用：
JS:
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:
HTML：
<ul id="test">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
Example:http://jsfiddle.net/ArondeParon/2dEFg/5/
示例：http : //jsfiddle.net/ArondeParon/2dEFg/5/
Please note that this is a very basic example and you will likely encounter some problems when you delegate events to elements containing more than one level. When this happens, you will have to traverse the DOM tree upwards to find the containing element.
请注意，这是一个非常基本的示例，当您将事件委托给包含多个级别的元素时，您可能会遇到一些问题。发生这种情况时，您将不得不向上遍历 DOM 树以找到包含元素。
回答by Andrea
The object which was actually clicked is
实际点击的对象是
event.target
inside the onclickcallback. What you are trying to do is a good idea, and it is known as event delegation.
在onclick回调里面。您尝试做的是一个好主意，它被称为事件委托。
回答by axio
You can use event.target for this:
您可以为此使用 event.target：
Did not seem to be working so I made small change seems to be working now.
似乎没有工作，所以我做了一些小改动，现在似乎正在工作。
var ul = document.getElementById('test');
ul.onclick = function(event) {
var target = event.target;
alert(event.target.innerHTML);
};
回答by Dhaval Rajpara
//The simplest way to do this might be to append a query parameter to your links:
//执行此操作的最简单方法可能是将查询参数附加到您的链接：
<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>
回答by Rohit Parte
If you want exact value of element then following code can work.Use innerText except innerHTML JS:
如果您想要元素的确切值，则可以使用以下代码。使用除innerHTML JS 之外的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:
HTML：
<ul id="test">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
