在Firefox中禁用元素后不会触发DOM事件

Question

I am developing a simple game where the user clicks the 'Start' button, the button is disabled and after that user performs some actions on the canvas using an arrow keyboard. 我正在开发一个简单的游戏，用户单击“开始”按钮，按钮被禁用，之后用户使用箭头键盘在画布上执行某些操作。 It works as expected in Chrome but I observed a strange behaviour in Firefox. 它在Chrome中按预期工作，但我在Firefox中观察到一种奇怪的行为。 Namely, after disabling the button, 'keydown' events are not fired on the page until I click somewhere on it. 也就是说，在禁用按钮后，在我点击某个位置之前，不会在页面上触发“keydown”事件。 It looks like after disabling the button, the page loses focus or something. 看起来在禁用按钮后，页面失去焦点或其他东西。

Is this behavior according to specifications, or is it a Firefox DOM event dispatching bug? 这种行为是根据规范，还是Firefox DOM事件调度错误？

Firefox 64.0, Ubuntu Firefox 64.0，Ubuntu

 const button = document.querySelector('button'); const canva = document.querySelector('.canva'); const doc = document.documentElement; doc.addEventListener('keydown', evt => { canva.innerHTML = evt.key; }); button.addEventListener('click', evt => { button.disabled = true; });

 body { font-family: sans-serif; margin: 0; background-color: #F4511E; } button { display: block; text-align: center; width: 100px; margin: 10px auto; } .canva { background-color: white; width: 200px; height: 200px; margin: auto; font-size: 1.5em; font-weight: bald; line-height: 200px; text-align: center; }

 <!doctype html> <html> <head> <title>Lost events</title> <meta charset="UTF-8"> </head> <body> <button>Start</button> <div class="canva"></div> </body> </html>

Answer 1

Button gets focus and becomes document.activeElement after click. 按钮获得焦点并在单击后成为document.activeElement 。 After disablind it is automatically blur() -ed in Chrome, but in Firefox it continues to be activeElement and eats events like a black hole. 在disablind之后它会在Chrome中自动blur() -ed，但在Firefox中它仍然是activeElement并且像黑洞一样吃掉事件。 So, it is necessary to explicitly call document.activeElement.blur() after disabling activeElement 因此，有必要在禁用activeElement后显式调用document.activeElement.blur()

Thanks to @Kaiido for his comment 感谢@Kaiido的评论

There is an issue in Firefox bugtracker about that https://bugzilla.mozilla.org/show_bug.cgi?id=706773 Firefox bugtracker中存在一个关于https://bugzilla.mozilla.org/show_bug.cgi?id=706773的问题

在Firefox中禁用元素后不会触发DOM事件

问题描述

1 个解决方案

解决方案1
2 已采纳 2018-12-18 06:53:10

在Firefox中禁用元素后不会触发DOM事件

问题描述

1 个解决方案

解决方案1 2 已采纳 2018-12-18 06:53:10

解决方案1
2 已采纳 2018-12-18 06:53:10