当一个元素丢失时,测试哪个元素具有焦点

时间:2012-04-04 16:25:36

标签: javascript jquery html

我想要做的是测试一个元素(一个SELECT)在焦点转移到另一个特定元素(另一个SELECT)时失去焦点的时间。我想在焦点丢失时触发某些东西而不是两者中的一个。

问题是我在第一个选择中测试它失去了焦点(使用模糊事件),如果另一个选择了它,但是DOM还没有更新。

以下是我所做的事例:

$select1.on("blur", function() {
    if($select2.is(":focus"))
    {
         // do something
    }
    else
    {
        // do something else
    }
});

$ select1和$ select2只是包含该元素的两个变量。我读到当一个元素获得焦点时,JQuery会添加一个标识符“:focus”,但是我这样做,它不起作用。

在所有情况下,它都会进入其他“做其他事情”。

2 个答案:

答案 0 :(得分:2)

马特对事件的顺序是正确的,但你可以更有创意。

例如,使用setTimeout来延迟模糊检查,这样您就知道已经解雇了焦点。简单。

$select1.on("blur", function() {
  window.setTimeout(function() {
    if($select2.is(":focus"))
    {
       // do something
    }
    else
    {
      // do something else
    }
  },100);
});

试试那个。

答案 1 :(得分:1)

由于blur事件在新元素的focus之前被明显触发,因此您可以执行事件设置为在一个事件中变量并在另一个事件中检测它。

$select1.on('blur', function (e) {
    var $that = $(this);

    setTimeout(function () {
        if (($that.data('focussed') || 0) > e.timeStamp - 5) {
            // Do something
        } else {
            // Something else
        }
    }, 1);
}); 

$select2.on('focus', function (e) {
    $select1.data('focussed', e.timeStamp);
});

看到它在这里工作; http://jsfiddle.net/uZAMm/