❗ 本文最后更新于 4516 天前，文中所描述的信息可能已发生改变，请谨慎使用。

以下代码，点test2后，firefox、chrome、opera输出顺序是1、2，但IE9的顺序却是2、1。

<input id="test1" /> <button id="test2">click</button> <div id="out"></div>
<script type="text/javascript">
    var test1 = document.getElementById('test1'),
        test2 = document.getElementById('test2'),
        out = document.getElementById('out');

    test1.addEventListener('focus', function(e) {
        out.innerHTML += '1<br />';
    });

    test2.addEventListener('click', function() {
        test1.focus();
        out.innerHTML += '2<br />';
    });
</script>

PS，如果把test1.focus()换成下面这样，则所有浏览器表现一致，都是1、2这样的顺序：

var evt = document.createEvent('Events');
evt.initEvent('focus', true, true, document.defaultView);
test1.dispatchEvent(evt);

从表面上来看，IE9中的test1.focus()这个过程被异步执行了。解决方案倒是很简单，把后面的语句放在万能的setTimeout 0里就万事大吉了。

团队的郝同学在使用QWrap的valid组件时踩到这个坑了。先记录下来，稍后做一些详细研究，有结论了再更新。

@update，团队的贾同学补充了一个链接，看来这个问题一直存在，属于历史遗留问题，不限于IE9。http://stackoverflow.com/questions/5900288/ie-focus-event-handler-delay

本文链接：https://mailseason.com/post/event-order-in-ie9.html，参与评论 »

--EOF--

发表于 2012-07-10 17:44:37，并被添加「IE、IE9、Event」标签。查看本文 Markdown 版本 »

本站使用「署名 4.0 国际」创作共享协议，相关说明 »