在跟踪单击了哪些元素时，e.target.id有时为空

Question

我正在尝试测试以下JavaScript代码，该代码旨在跟踪用户对多项选择调查的反应时间：

document.onclick = function(e) {
    var event = e || window.event;    
    var target = e.target || e.srcElement;
    //time tracking 
    var ClickTrackDate = new Date;
    var ClickData = ""; 
    ClickData = target.id + "=" + ClickTrackDate.getUTCHours() + ":" + 
        ClickTrackDate.getUTCMinutes() + ":" +
        ClickTrackDate.getUTCSeconds() +";";
    document.getElementById("txtTest").value += ClickData;
    alert(target.id); // for testing
}

通常target.id等于单击的元素的id，正如您所期望的，但有时target.id是空的，似乎是随机的，有什么想法吗？

Answer 1

可能是因为被点击的元素没有ID。例如，如果你有这样的HTML，就会发生这种情况：

<div id="example">This is some <b>example</b> text.</div>

并且有人点击黑体字"example"，使得事件目标将是b元素而不是div。

您可以尝试在DOM树上遍历，直到找到确实有ID的元素，类似于以下内容：

var target = e.target || e.srcElement;
while (target && !target.id) {
    target = target.parentNode;
}
// at this point target either has an ID or is null

Answer 2

只使用e.currentTarget而不是e.target。