在焦点上接收两个`focusin`事件

ave*_*net 5 jquery focusin

我在做什么

在代码的某些部分,我有一个关于focusin事件的监听器,另一部分以编程方式将焦点设置在一个input.在Chrome,Safari,Firefox上,事件监听器被调用一次,但在IE(包括IE10)上,它被调用两次.我用jQuery注册了监听器,.on()并用jQuery 设置了焦点.focus().请参阅下面的显示此行为的示例的完整源代码,如果您愿意,可以运行该示例.

问题

  1. 即使不使用jQuery,IE也会发射focusin两次.并且只有在以编程方式设置焦点时才会这样做,而不是在用户选项卡或单击字段时.为什么?它只是一个IE漏洞,还是IE有这么好的理由?
  2. 无论是否是IE漏洞,jQuery都不应该把IE和其他浏览器的区别搞清楚吗?换句话说,是不是这样一个jQuery bug?
  3. 你会如何解决这个问题?(即所以我可以拥有每个焦点只运行一次的代码,无论是以编程方式还是由用户设置焦点.)

完整来源

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script>
            $(function() {
                $('input').on('focusin', function() {
                    var c = $('#count');
                    $('#count').text(1 + parseInt(c.text()));
                    console.log('focusin');
                });
                $('input').focus();
            });
        </script>
    </head>
    <body>
        <input>
        <code>focusin</code> received: <span id="count">0</span>.
    </body>
</html>
Run Code Online (Sandbox Code Playgroud)

Joh*_*ner 3

这绝对是IE的问题。来自JQuery 1.9 升级指南

不幸的是,所有版本的 Internet Explorer(6 到 10)都会异步触发焦点事件。当您在 IE 中 .trigger("focus") 时,jQuery 将不会“看到”稍后将发生的异步焦点事件,因此它会触发自己的事件之一以确保焦点事件始终发生,如上所述。这会导致对事件处理程序的两次调用。为了避免这种双重调用(但存在事件处理程序根本不被调用的风险),请直接使用 DOM focus 方法,例如 $("selector").get(0).focus()。

我使用过$('input').get(0).focus(),它在页面加载上不是很一致。如果我将代码移至按钮,那么我就会始终触发事件focusin