Question

我有html如下：

<div onclick=" callJavascript()">

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

</div>

当我点击＆＃39; abc＆＃39;或者＆＃39; ghi＆＃39;，function callJavascript()内的任何地方都有，以找出我点击的跨区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代码中避免事件附件，因为它会导致范围问题并迫使您（如在您的情况下）手动传递事件参数。

Answer 2

您必须将事件参数添加到onclick侦听器，以便在侦听器中访问该事件。

<div onclick="callJavascript(event)">

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

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

工作demo

Answer 3

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

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

在此处查看此行动：http://jsfiddle.net/3KfyG/。

Answer 4

尝试：

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

Answer 5

获取属性或类：

<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

检查哪个html元素触发onclick

5 个答案: