检查哪个HTML元素触发了onclick事件

Question

I have html like below:

<div onclick=" callJavascript()">

<span id="abc"> abc </span>
<span id="def"> def </span>
<span id="ghi"> ghi </span>

</div>

当我点击'abc'或'ghi'时，在function callJavascript()内部有没有任何地方可以查找我点击的是哪个标签的id？

- cometta

Answer 1

有的：

对于非IE浏览器：

function callJavascript ( e ) {

    alert(e.target); // the DOMElement object
    alert(e.target.id); // the object's id

}

对于IE浏览器：

function callJavascript ( e ) {

    alert(e.srcElement); // the DOMElement object
    alert(e.srcElement.id); // the object's id

}

您仍然需要调整您的HTML代码:

<div onclick=" callJavascript(e)"> // replace "e" by "event" in IE.

<span id="abc"> abc </span>
<span id="def"> def </span>
<span id="ghi"> ghi </span>

</div>

如果您需要更全面的参考资料，可以访问以下链接：http://www.quirksmode.org/js/events_properties.html 哇！为了更准确，建议您将事件监听器添加在元素上而不是

元素上，这样事件发生时目标或源元素就是它自己。

虽然这不是问题的一部分，但还是值得一提：我通常避免在HTML代码中附加事件，因为它会导致作用域问题，并且像您这样需要手动传递事件参数。

- dader

---

只要在监听器中给它一个参数，那么“e”就会未定义，或者我错了？ - DanielB

这正是我的意思，所以你应该在你的答案中添加一些修改后的HTML代码，因为原始发布者没有使用<div onclick=" callJavascript(e)">，使用 event 而不是 e 将能够实现跨浏览器兼容。 - DanielB

如果您为 callJavascript() 有另一个参数会怎样？ - undefined

（所以 onclick 是例如 onclick="callJavascript('somevalue')"） - undefined

根据参数的顺序，可以是onclick="callJavascript('somevalue', e);"或者onclick="callJavascript(e, 'somevalue');"。 - dader

Answer 2

您需要在onclick监听器中添加事件参数，以便在监听器内部可以访问事件。

<div onclick="callJavascript(event)">

然后使用 target 或 srcElement 属性来获取DOM元素。

function callJavascript(e) {
    var target = e.srcElement || e.target;
    alert(target.id);
}

工作中演示

- DanielB

Answer 3

您可以按照以下方式使用jquery：

$(function() {
    $("span").click(function(e) {
        alert(this.id);
    }
});

在这里查看演示： http://jsfiddle.net/3KfyG/。

- Ryan Gross

Answer 4

获取属性或类：

<div class="foo" my_attr="foo2" onclick="callJavascript(event)">
function callJavascript(e) {
    var target = e.srcElement || e.target;    
    console.log(target.className);
    console.log(target.getAttribute('foo2'));
}

看这个链接：http://krook.org/jsdom/HTMLParagraphElement.html，它与IT技术有关。

- Barno

Answer 5

尝试：

<script>
    function callJavascript() {
        alert(event.target.id);
    } 
</script>

- joern