当按下带有html标签的html按钮时，目标错误

Question

我有四个按钮，想跟踪哪一个被按下。在其中一些我用HTML标签更改了innerHTML属性。然后我注意到当按下一个按钮时，mouseEvent.target可能不是按钮而是文本本身。这仅在按下html-tag-modified按钮时发生。

以下是js代码的一部分：

for (var i = 0; i < 4; i++){        
    buttons[i].innerHTML = countries[index]["c"];
    buttons[i].onclick = clickHandler;

}

buttons[correct_btn].innerHTML = "<some-tag>" + countries[target_id]["c"] + "</some-tag>";

function clickHandler(me){
    console.log(me.target);
}

我希望我能清楚地描述这个问题。我可以在按钮中没有html标签的情况下离开，但我仍然想知道是否有办法避免按钮文本被定位。或者，从一开始我的跟踪按钮的方法是否错误？

Answer 1

请改用currentTarget。来自MDN：

  

它始终引用事件处理程序附加到的元素   而event.target则标识了其上的元素   事件发生了

function clickHandler(me){
    console.log(me.currentTarget);
}

Here是演示上述内容的小提琴。