按下带有html标签的html按钮时出现错误目标

Wrong target when pressing html button with html tags in it

本文关键字：html 目标 错误 按钮 标签      更新时间：2023-09-26

我有四个按钮，想跟踪按下了哪个按钮。在其中一些中，我用HTML标记更改了innerHTML属性。然后我注意到，当按下按钮时，mouseEvent.target可能不是按钮，而是文本本身。只有当按下html标记修改按钮时才会发生这种情况。

以下是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标签，但我仍然想知道是否有办法避免按钮文本成为目标。或者可能是我追踪按钮的方法从一开始就错了？

请改用currentTarget。来自MDN:

它总是引用事件处理程序已附加到的元素与event.target相反，后者标识事件发生

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

这里有一把小提琴来演示上面的内容。

相关文章：