点击监听器:如何让我的鼠标监听器记录给定按钮的每次点击

Question

我目前正在记录我的html文件上的所有鼠标点击。我有两个功能。第一个是一般侦听器，记录所有鼠标点击。第二个是点击按钮等html元素。这两个鼠标事件的代码如下。当我单击按钮时，第二个函数会记录此事件。但是，当我之后第二次单击同一按钮时，第一个函数会记录它。在这种情况下，我在日志上看不到单击是在按钮上。如何修改我的代码，以便相应的功能记录甚至随后对按钮的几次点击？

//general mouse click listener
document.addEventListener('click', showClickCoords, true);
function showMovementCoords(event) {
trackedData.push("Date.now()    +" "+
event.clientX.toString()+"_"+event.clientY.toString());
}
//listener for html elements
document.getElementById("clickOnMe").addEventListener("focus", function(event) {focusFunction(event);});
function focusFunction(event) {
trackedData.push(Date.now()+" " +event.target.id );
}

Answer 1

问题是您使用的是focus侦听器。这意味着每当您聚焦按钮时，它都会触发该听众，因此如果您已经单击了一次，则必须聚焦其他内容，然后再次聚焦该按钮。要修复该行为，您应该改用click侦听器。

var trackedData = [];
document.addEventListener('click', showMovementCoords, true);
function showMovementCoords(event) {
trackedData.push("Date.now()    +" + event.clientX.toString() + "_" + event.clientY.toString());
console.log(trackedData);
}
document.getElementById("clickOnMe").addEventListener("click", function(event) {
focusFunction(event);
console.log(trackedData);
});
function focusFunction(event) {
trackedData.push(Date.now() + " " + event.target.id);
}

<button id="clickOnMe">Click on me</button>