Question

使用此HTML：

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

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

问题是，当我在SomeInput上实际调用blur（）时，SomeInput的模糊事件处理程序会运行，但会中止，因为它认为SomeDiv仍然具有焦点。

我已尝试明确模糊输入和父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);
});

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

1 个答案: