Question

body-element事件上的Keydown在通过它的click事件处理程序禁用button-element后停止触发。

动作序列：

keydown正在解雇
点击按钮
keydown停止射击
点击正文
keydown再次开始射击

注意：此行为只发生在Mozilla Firefox中。在谷歌浏览器中它可以正常工作。

 
$(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浏览器点击按钮时，浏览器会自动从按钮中聚焦并专注于正文。但是，Firefox没有表现出这种行为，当按钮被禁用并且专注于相同的元素即按钮时，它什么都不做。但是如果它没有被禁用，它将专注于身体。

来自Button元素的Clicking and focus

是否点击<button>会导致（默认情况下）成为重点因浏览器和操作系统而异。

对于它的工作，您必须在按钮上使用.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

点击按钮后，你将焦点放在按钮上，这就是杀戮和keydown事件。

如果您在this.blur()

之后添加this.disabled = true，该怎么办？

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

2 个答案: