javascript - 按下带有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);
}

这是一个演示上述内容的小提琴。