頁面中千萬不要給變量起名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究竟是啥，這是個很天然的思路；也不會折騰那麼久吧。