clicklistener：如何让我的 mouselistener 记录每次点击给定按钮

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>

clicklistener：如何让我的 mouselistener 记录每次点击给定按钮

clicklistener: how to get my mouselistener record every click on a given button

javascript

button

mouseclick-event