我目前正在记录 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 );
}
最佳答案
问题是您正在使用 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>
关于javascript - 点击监听器 : how to get my mouselistener record every click on a given button,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57958924/