你很想要單一標準，但製作瀏覽器的人才不理你咧～

在處理一個網頁上某個 element 的事件時，常會去寫一個 event handler，然後讓該 element 的 onXXX event 被觸發時，會去 call 你寫的 event handler，但這樣子的動作，至少在 IE 與 Firefox 中是有一點不太一樣的..

假設我有個 div element，我希望當滑鼠點到這個 div 的時候，秀出滑鼠的座標點，乍想之下可能會這樣寫：

<script type="text/javascript">
  function handleClick(e) {
    var mouseX = e.pageX || e.clientX + document.documentElement.scrollLeft;
    var mouseY = e.pageY || e.clientY + document.documentElement.scrollTop;
    alert(mouseX + ", " + mouseY);
  }

  function init() {
    var elem = document.getElementById('sandbox');
    elem.onclick = handleClick;
  }
</script>
<body onload="init();">
...
<div id="sandbox">
...
</div>
...
</body>

這樣的 HTML+JavaScript 跑在 firefox 上面是沒有問題的，但在 IE 上就會跟你抱怨 e 沒有定義。但因為用 IE 的人實在是太多了，不得不照顧一下 IE 的使用者，所以要改寫 handleClick 這個 function：

function handleClick(e) {
    if (e == undefined) var e = window.event;
    var mouseX = e.pageX || e.clientX + document.documentElement.scrollLeft;
    var mouseY = e.pageY || e.clientY + document.documentElement.scrollTop;
    alert(mouseX + ", " + mouseY);
}

因為在 IE 裡，觸發 onXXX event 的時候並不會把 event object 傳到 function 裡，所以當我們發現 e 是 undefined 時，就補一個宣告給它囉。

要同時照顧不同瀏覽器還真是一件蠻辛苦的事..

 

歷史上的今天