[小Tip]IE9中focus执行顺序差异

以下代码,点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

本文链接:参与评论 »

--EOF--

提醒:本文最后更新于 1611 天前,文中所描述的信息可能已发生改变,请谨慎使用。

专题「浏览器」的其他文章 »

Comments