-5 
<div id="items" onclick="myfunction()">
<p id="item">a</p>
<p id="item">b</p>
<p id="item">c</p>
<p id="item">d</p>
<p id="item">e</p>
</div>

function myfunction() {
var r = document.getElementById("item").innerHTML;
alert(r);
}

当我点击'a'时，弹出并显示'a'，但是当我点击b时，弹出并再次显示'a'！失踪者在哪里？

4

3 回答 3

2

要获取触发事件的原始元素，您应该使用以下内容：

<div id="items" onclick="myfunction(event);">

function myfunction(e) {
    var evt = e || window.event;
    var tar = evt.target || evt.srcElement;
    // Should probably check that the tar element is a <p> and has the specific id/class
    var val = tar.innerHTML;
    alert(val);
}

http://jsfiddle.net/GtfDf/

类似地，为了正常工作和有效的 HTML，id需要唯一的属性。getElementById另一种选择是将事件绑定到每个<p>元素，而不是使用id，使用class。像这样：

<div id="items">
    <p class="item">a</p>
    <p class="item">b</p>
    <p class="item">c</p>
    <p class="item">d</p>
    <p class="item">e</p>
</div>

window.onload = function () {
    var items_div = document.getElementById("items");
    var items = items_div.querySelectorAll(".item");
    for (var i = 0; i < items.length; i++) {
        items[i].onclick = myfunction;
    }
};

function myfunction() {
    var val = this.innerHTML;
    alert(val);
}

http://jsfiddle.net/eWZyn/1/

getElementById但是使用/有很多选择/替代方案querySelectorAll，可能会更好，也可能不会更好。

第一个示例对于从 div 添加/删除的动态项目“更好”。在我看来，第二个例子似乎更适合静态项目。我只是说，如果 div 内还有其他元素可以为 click 事件处理。无论哪种方式，我希望这些示例有所帮助。

于 2013-03-04T16:16:08.950 回答
0

这就是你要找的。

<div id="items">
<p onclick="myfunction(this)">a</p>
<p onclick="myfunction(this)">b</p>
<p onclick="myfunction(this)">c</p>
<p onclick="myfunction(this)">d</p>
<p onclick="myfunction(this)">e</p>
</div>
<script>
function myfunction(a) {
var r = a.innerHTML;
alert(r);
}
</script>
于 2013-03-04T16:16:34.720 回答
0

您可以将事件处理委托给容器 div 并使用目标（或 srcElement，在 IE 8 及更低版本中）返回单击段落的文本。innerHTML 可能不是最佳选择，因为段落可以具有跨度和其他内联 html 标记和属性以及文本。

<!doctype html>
<html lang="en">
<head>
<meta charset= "utf-8">
<title>test page</title>
</head>
<body>

<div>
<p>a</p>
<p>b</p>
<p>c</p>
<p>d</p>
<p>e</p>
</div>

<script>
function myfunction(e) {
    e=e||window.event;
    var who=e.target || e.srcElement;
    if(who.tagName=='P'){
        alert(who.textContent || who.innerText || '');
    }
}
onload=function(){
    document.getElementsByTagName('div')[0].onclick=myfunction;
}
</script>

</body>
</html>
于 2013-03-04T17:02:04.710 回答