javascript - 点击监听器 : how to get my mouselistener record every click on a given button

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>