在这里，我们将给大家分享关于JavaScriptaddEventListener单击和键码的知识，让您更了解js按钮单击事件的本质，同时也会涉及到如何更有效地addEventListener不是函数“
在这里，我们将给大家分享关于JavaScript addEventListener 单击和键码的知识，让您更了解js按钮单击事件的本质，同时也会涉及到如何更有效地addEventListener 不是函数“Javascript”、addEventListener 中的 setTimeout 让应用程序每 100 个 addEventListener 事件休息一下、addEventListener 在 Javascript 中返回 undefined、addEventListener 在独立的 javascript 中，而不是 html 文件的一部分的内容。
本文目录一览：- JavaScript addEventListener 单击和键码（js按钮单击事件）
- addEventListener 不是函数“Javascript”
- addEventListener 中的 setTimeout 让应用程序每 100 个 addEventListener 事件休息一下
- addEventListener 在 Javascript 中返回 undefined
- addEventListener 在独立的 javascript 中，而不是 html 文件的一部分
JavaScript addEventListener 单击和键码（js按钮单击事件）
如何解决JavaScript addEventListener 单击和键码
- 通过鼠标点击工作。
- 关键代码不会触发视频停止。
- 添加
focus()后的键码有效，但可能会导致一些问题。
我希望键码和鼠标点击一直有效。相互独立，当我按下“空格”按钮时它会点击按钮，当我点击鼠标时它会点击按钮。
let testKey = document.querySelector(".switch-btn");
["click","keypress"].forEach(ev => {
testKey.addEventListener(ev,function(e) {
if(ev == "click") {
console.log("click");
if(!testKey.classList.contains("slide")) {
testKey.classList.add("slide");
} else {
}
}
if(e.keyCode === 32) {
console.log("click,space");
}
});
}); <button>
<span>
Play
</span>
<span>
pause
</span>
<span></span>
</button> 解决方法
df2 = df.withColumn(''_c49'',lower(col(''_c49''))) 事件已弃用且不再推荐（请参阅 Document: keypress event documentation）。相反，您可以使用 keypress 事件。
如果您打算分别处理 keydown 和 click 事件，那么您应该检查 keydown 事件处理程序的 detail 属性。如果单击按钮，则该属性的值为 click。 （请参阅 UIEvent.detail 文档）
除非用户使用 Tab 键关注按钮，否则 1 事件不会触发您的处理程序。在容器或文档级别添加处理程序可以解决这个问题。在下面的代码中，我添加了这样一个处理程序，并在按钮的处理程序中调用了 keydown 方法，以防止事件冒泡到文档级别。
stopPropagationlet testKey = document.querySelector(".switch-btn");
document.addEventListener(''keydown'',function(e) {
if(e.keyCode === 32) {
console.log("document: space pressed");
doTheClassListThing();
}
});
["click","keydown"].forEach(ev => {
testKey.addEventListener(ev,function(e) {
if(ev == "click" & e.detail == 1) {
console.log("click");
doTheClassListThing();
}
if(e.keyCode === 32) {
e.stopPropagation();
console.log("Button: space keydown");
doTheClassListThing();
}
});
});
function doTheClassListThing() {
console.log(''doTheClassListThing() executed'');
if(!testKey.classList.contains("slide")) {
testKey.classList.add("slide");
} else {
}
}我不确定我是否理解这个问题，但最初没有注册密钥的原因是按钮没有聚焦。您可以尝试调用 testKey.focus() 以确保它最初是专注的。
我不推荐这种方法——将焦点集中在按钮上可能会产生可访问性问题并干扰其他元素交互，但这里有一个片段只是为了演示将焦点放在按钮上如何解决问题。
我同意 Terry 在下面的评论，在 body 上附加事件处理程序会不那么令人担忧。
let testKey = document.querySelector(".switch-btn");
testKey.focus();
["click","keypress"].forEach(ev => {
testKey.addEventListener(ev,function(e) {
if(ev == "click") {
console.log("click");
if(!testKey.classList.contains("slide")) {
testKey.classList.add("slide");
} else {
}
}
if(e.keyCode === 32) {
console.log("click,space");
}
testKey.focus();
});
});<button>
<span>
Play
</span>
<span>
pause
</span>
<span></span>
</button>
