页面中千万不要给变量起名top！一次艰难的Debug之路

问题

今天帮人家修Bug，页面大体是这样：有四个按钮，对应上下左右四个方向，点击哪个就使页面上的某个元素向相应方向移动。这本来是个很简单的页面；
代码大体如下：

html

<div id="top">top</div>



<div id="bottom">bottom</div>



<div id="left">left</div>



<div id="right">right</div>




<script>
var top=document.getElementById("top");
var bottom=document.getElementById("bottom");
var left=document.getElementById("left");
var right=document.getElementById("right");

top.onclick=function(){alert("top");};
bottom.onclick=function(){alert("bottom");};
left.onclick=function(){alert("left");};
right.onclick=function(){alert("right");};
</script>

每一个onclick事件中本来是有更多的代码的，但是最后找bug找疯掉了，不断的删掉代码，删到这个样子，问题还是存在：无论点击哪个，"top"也会被弹出，也就是说，top的onclick也被触发了！

错误定位

万般无奈之下，只好试试弹出top到底是啥，一看到结果一下子就想到什么原因了。

在浏览器中，top指代一个对象，始终指向最高层框架，也就是浏览器窗口。
1. 当页面中存在框架时，从top出发，可以帮助很快得找到想要引用的框架。
2. 如果页面不包含框架，即最外层window就是唯一的window窗口，此时top是window的一个属性，指向window本身。

javascripttop == window.top;//true
top == window;//true
window == window.top;//true

然而！然而我们是可以给top赋值的，虽然这样的操作是无效的，原来top引用的窗口对象并不会被覆盖，但是浏览器也并不会报错！（所以其实能让浏览抛出异常的错误一般来说是比较好修正的，因为提示的错误信息已经能指明问题所在了。）

错误原因

这样之前那个页面的问题就很清楚了，点击了任何div后，最终事件都会冒泡到window窗口上。也就是，给top定义的onclick事件也会执行。

事后回头想想，debug的思路其实很清晰的，之前已经确定了top的onclick事件会很奇怪的执行，那么我们看看top到底是啥，这是个很自然的思路；也不会折腾那么久吧。