在元素的模糊处理程序运行之前模糊元素及其父元素？

Question

使用此 HTML：

<div id="SomeDiv">
   <input id="SomeInput" />
   <div id="ChildDiv"></div>
</div>

我有一个事件处理程序分配给SomeInput 的模糊事件。 blur 事件处理程序检查 SomeDiv 或 SomeDiv 的任何孩子是否仍然有焦点，如果其中任何一个有焦点则中止（按设计）。

问题是，当我务实地调用 SomeInput 上的 blur() 时，SomeInput 的 blur 事件处理程序运行，但由于它认为 SomeDiv 仍然有焦点而中止。

我已尝试显式模糊输入和父 div，但输入处理程序仍将父 div 视为焦点。我也尝试过聚焦和模糊窗口和身体元素，这似乎没有任何作用。

如何同时模糊 SomeInput、SomeDiv 和 SomeDiv 的子级，所以当 SomeInput 的事件处理程序运行时，它不将 SomeDiv 视为焦点？

事件处理程序：

this.eBlur = function(event,eventThis) {
   console.log(this.$element.attr('id')+' has lost focus.');
   if(this.$element.has(":focus").length === 0){
      console.log('widget does not have focus');
      // do something.
   }
   else{
      console.log('something is still focused, do nothing.');
   }
}

var base = this;
this.$input.bind('blur', function(e){base.eBlur(e,this);});

然后执行：

console.log('about to blur');
this.$input.blur();
// The blur handler runs immediately here
console.log('blur complete');

所以日志显示：

about to blur
this.$element.attr('id')+' has lost focus.
something is still focused, do nothing.
blur complete

Answer 1

发生这种情况的原因是blur 事件在元素真正失去焦点之前触发。您必须将代码下推到堆栈中，以便它仅在元素实际模糊后执行。这可以通过将您的代码放入计时器中来完成（无需延迟）：

$('#SomeInput').on('blur', function () {
    setTimeout(function () {
        // run your code here...
    }, 0);
});