Question

<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'！失踪在哪里？

Answer 1

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

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

在类似的说明中，为了使id正常工作，以及有效的HTML，需要唯一的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事件处理。无论哪种方式，我希望这些例子有所帮助。

Answer 2

这就是你要找的东西。

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

Answer 3

您可以将事件处理委托给容器div并使用目标（或者在IE 8及更低版本中使用srcElement）返回单击的段落的文本。 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>

获取指定段落中的段落文本

3 个答案: