如何在JavaScript中取消onBlur事件？

Question

我想为一个元素设置一个onBlur事件，该事件验证值，并在无效时“取消”模糊并重新聚焦输入。但是，从onBlur返回false不会像onClick一样取消onBlur。是否有解决此问题的方法（可能使用jQuery）？

- JoelFan

Answer 1

我不知道有任何可靠的跨浏览器方法来实现这一点。通常在onblur事件中设置一个小的延迟时间，在计时器触发时调用focus()函数即可。

例如：

document.getElementById('your_input_id').onblur = function() {
  var self = this;
  setTimeout(function() { self.focus(); }, 10);
}

- casablanca

---

我如何将DOM元素传递给超时处理程序？setTimeout只接受代码字符串，而不是对象。 - JoelFan

@JoelFan：你可以将一个函数传递给setTimeout，请查看我的更新答案。 - casablanca

实际上，setTimeout需要一个函数。setTimeout(function() { ... }, 40); - SLaks

非常酷，谢谢！甚至超时为0也可以。 （我猜你只需要安排一个事件而不是尝试在运行的事件处理程序内部完成工作） - JoelFan

@JoelFan：是的，没错。我只是举了10作为例子，因为实际上，0超时仍然默认为最小值10或15。 - casablanca

这非常有帮助。我需要在失焦时一直执行某些操作，但点击特定按钮时除外。超时控制权转移到其他事件。在我的情况下，我正在删除元素（甚至取消了超时），但您可以设置标志或使用其他流程控制 - 太棒了！ - DanCaveman

Answer 2

您可以在处理程序中调用focus()函数。
这有时会有所帮助。

- SLaks

Answer 3

你可以通过在零秒延迟内使用jQuery的focus()函数来实现这一点。以下是一个示例：

$('#my_input').bind('blur', function(event) {
   var $input = $(this);
   var is_input_valid = false;

   // Code to determine if input is valid
   // ...

   if (!is_input_valid) {
      setTimeout(function() {
        $input.focus();
      }, 0);
      return false;
   }

});

- Uyghur Lives Matter

---

那个方法可以工作，但缺点是它仅适用于具有“id”标签的元素，而且只有在该“id”在页面上保证唯一时才能使用。 - JoelFan

好的建议。如果您需要使用除ID之外的内容，那么您可以将this分配给var self并在超时回调闭包中使用self。 - Uyghur Lives Matter

“最安全”的零秒超时时间实际上是大约16毫秒。这是由于不同设备/浏览器上JavaScript计时器的差异造成的。如果您将0用作零秒超时时间，有时会发现您的代码是同步的。” - nhaarman

@Niek 你有这方面的资料吗？根据 MDN https://developer.mozilla.org/en-US/docs/Web/API/window.setTimeout#Minimum.2F_maximum_delay_and_timeout_nesting，浏览器会强制执行最小延迟。 - Uyghur Lives Matter

@cpburnz，恐怕不是。那段文字是由匿名用户在答案上提供的编辑。 - nhaarman