jQuery Mozilla Firefox 中的 keydown 事件处理问题

Question

在通过点击事件处理程序禁用按钮元素后，主体元素事件的 Keydown 停止触发。

动作顺序：

keydown 正在触发
点击按钮
keydown 停止触发
点击正文
keydown 再次开始触发

注意事项：此行为仅发生在 mozilla firefox 中。在 google chrome 它可以正常工作。

 
$(document).ready(function(){
   $('body').keydown(function () {
       console.log('<body> keydown');
   });

   $('#button').click(function () {
       this.disabled = true;
   });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="button">Button</button>

Answer 1

由于浏览器的行为，在 Chrome 中单击按钮时，浏览器会自动将焦点从按钮移出并集中在 body 上。但是，Firefox 不会表现出这种行为，当按钮被禁用并专注于相同的元素即按钮时，它什么都不做。但是如果它没有被禁用，它将专注于 body.

来自按钮元素的Clicking and focus

Whether clicking on a <button> causes it to (by default) become focused varies by browser and OS.

要使其正常工作，您必须在按钮上使用 .blur()，例如，

$(document).ready(function() {
  $('body').keydown(function() {
    console.log('<body> keydown');
  });

  $('#button').click(function() {
      this.disabled=true;
      $(this).blur();
  });
});

.disabled {
  border: 1px solid #999999;
  background-color: #cccccc;
  color: #666666;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="button">Button</button>

Answer 2

单击按钮后，您会将焦点留在按钮上，这是终止和按键事件。

如果在 this.disabled = true

后面加上 this.blur() 会怎么样

jQuery Mozilla Firefox 中的 keydown 事件处理问题

jQuery keydown event handling trouble in Mozilla Firefox

javascript

firefox

jquery

jquery-events