Chrome的alert与重复focus

前段时间,在写一个placeholder插件的时候,遇到了一个Chrome下的诡异问题,一段简单的代码,就可以使得浏览器弹出无限循环的 alert 提示框。

我用的代码片段精简到最后是这样的:

<input id="test" placeholder="placeholder" type="text" />  
<script type="text/javascript">  
    document.getElementById('test').onfocus = function(){
        alert('focus!');
    }
</script>  

可能是一时图方便,没log而是用lalert。结果当点掉alert提示框,Chrome会重复 focus 事件,而其他浏览器则不会。

我用的是 Chrome 18,看起来在 alert被点掉的瞬间,输入框再次获得了一次焦点,而这次的焦点获取同样触发了 focus 事件,再次弹出alert,然后如此循环往复...

好在这种现象只存在于Chrome里,其他浏览器都完全正常,虽然它们在点掉 alert 弹出框后的行为也不尽相同,但是无一会重复触发 focus

随后我测试了主流浏览器的行为,整理一张简单的表以备参考:

浏览器 行为
IE8 点掉alert后,输入框保留焦点,不重复触发focus
Firefox 11 点掉alert后,输入框焦点丢失,不重复触发focus
Chrome 18 点掉alert后,输入框保留焦点,重复触发focus陷入循环
Opera 10.60 点掉alert后,输入框保留焦点,不重复触发focus
Safari 10.60 点掉alert后,输入框保留焦点,不重复触发focus

可见 IE8,Opera 和 Safari 的表现是一样的,唯独 Firefox 会丢失焦点,还有就是唯独 Chrome 会重复 focus


评论加载中...

Disqus提供评论支持,如果评论长时间未加载,请飞跃长城。