safari无限alert的bug

来源：互联网发布：最靠谱的创业软件编辑：程序博客网时间：2024/04/29 14:43

今天写一个demo，在测试浏览的兼容性的时候，出现了一个很奇怪的bug。具体情形如下：

给页面上某个元素添加了一个onclick事件，事件里用了alert输出一个变量来查看结果的正确性。

结果在测试safari的时候，当关闭弹框的时候，居然又出现弹出了一个弹框，如此一直重复。。。

没办法，最后只能请出任务管理器，强行结束进程来关闭浏览器。

刚开始，我以为是自己程序出现了问题，所以把其它的部分注释掉了，只留下了必要的几句，结果还是一样。

于是我没有用鼠标点击而是试着用“enter”键来关闭，却没有此现象。

所以我就干掉了页面上所有的js,只留下以下的代码：

<script type="text/javascript">        document.getElementById('content').onclick = function() {alert('aaa');}</script>

可是问题依然如故。

我就想，这会不会是一个bug，所以google了一下"safari alert"，还真是一个bug。。。

几经测试，终于发现了问题的表面原因：

当你点击alert对话框的时候，如果鼠标的坐标在添加了onclick事件的元素内，就会触发click事件，就像你的点击穿透了对话框，鼠标是点击在了该元素上。

以下是测试的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>bug</title></head><body><div id='a' style='width:1000px;height:200px;background:#f00;'>aaa</div><div id='b' style='width:1000px;height:200px;background:#f0f;'>bbb</div><script type="text/javascript">document.getElementById('a').onclick = function(e) {alert('aaa');}        //如果不给"#b"绑定click事件，当你单击‘#a’的click事件弹出的对话框的时候，是不会出现无限alert的bug的，但如果你绑定了，那就悲剧了。。。document.getElementById('b').onclick = function(e) {alert('bbb');}</script></body></html>

至于为什么点击穿透了对话框，只能去问浏览器的作者们了。。。