javascript - 检查哪个html元素触发onclick

Question

我有如下的 html:

<div onclick=" callJavascript()">

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

</div>

当我点击“abc”或“ghi”时，function callJavascript() 中是否有任何地方可以找出我点击的是哪个 span id？

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

哇!我可以提一下，为了更好的准确性，您的事件监听器不应该在 div 元素上，相反，它可能由 span 元素本身触发。目标或 srcElement 是事件发生的对象。

这不是问题的一部分，但值得一提:我通常更喜欢避免在 html 代码中附加事件，因为它会导致范围问题并迫使您(如您的情况)手动传递事件参数。