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

What I'm doing

In some part of the code, I have a listener on focusin events, and in another part programmatically set the focus on an input. On Chrome, Safari, Firefox the event listener is called once, but on IE (including IE10), it is called twice. I register the listener with jQuery's .on() and set the focus with jQuery's .focus(). See below for the full source of an example that shows this behavior, and if you wish, you can run that example.

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

Questions

Even when not using jQuery, IE is firing focusin twice. And it does so only when the focus is set programmatically, not when users tab or click on the field. Why? Is it just an IE bug, or does IE have a good reason for behaving this way?
即使不使用jQuery，IE也会激活焦点两次。并且只有在以编程方式设置焦点时才会这样做，而不是在用户选项卡或单击字段时。为什么？它只是一个IE漏洞，还是IE有这么好的理由？
Whether it is a IE bug or not, shouldn't jQuery iron out the difference between IE and other browsers here? In other words, is not doing so a jQuery bug?
无论是否是IE漏洞，jQuery都不应该在这里搞清楚IE和其他浏览器之间的区别吗？换句话说，是不是这样一个jQuery bug？
How would you work around this? (I.e. so I can have code that runs just once per focus, whether the focus is set programmatically or by users.)
你会如何解决这个问题？（即所以我可以拥有每个焦点只运行一次的代码，无论是以编程方式还是由用户设置焦点。）

Full source

<!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>

2 个解决方案

#1

This is definitely an IE issue. From the JQuery 1.9 upgrade guide:

这绝对是一个IE问题。从JQuery 1.9升级指南：

Unfortunately, all versions of Internet Explorer (6 through 10) fire focus events asynchronously. When you .trigger("focus") in IE, jQuery won't "see" the async focus event which will occur later, so it fires one of its own to ensure that a focus event always occurs as described above. This causes two calls to the event handler. To avoid this double-call--but risk that the event handler is not called at all--use the DOM focus method directly, e.g., $("selector").get(0).focus().

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

I used $('input').get(0).focus() and it was not very consistent on the loading of the page. If I move the code to a button, then I consistently got the focusin event firing.

我使用了$（'input'）。get（0）.focus（），并且它在加载页面时不是很一致。如果我将代码移动到一个按钮，那么我一直在关注焦点事件。

What I'm doing

Questions

Full source

2 个解决方案

#1

更多相关文章

随机推荐