When tracking which elements were clicked e.target.id is sometimes empty

Question

I am trying to test the following JavaScript code, which is meant to keep track of the timing of user responses on a multiple choice survey:

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
}

Usually target.id equals to the the id of the clicked element, as you would expect, but sometimes target.id is empty, seemingly at random, any ideas?

Answer 1

Probably because the element that was clicked didn't have an ID. This will happen for example if you have HTML like this:

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

and someone clicks on the boldface word "example", so that the event target will be the b element instead of the div.

You could try walking up the DOM tree until you find an element that does have an ID, something like this:

var target = e.target || e.srcElement;

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