javascript - クリックされた要素を追跡する場合、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ます。

次のようなIDを持つ要素が見つかるまで、DOMツリーを上に歩いてみることができます。

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ください。