你很想要單一標準,但製作瀏覽器的人才不理你咧~
在處理一個網頁上某個 element 的事件時,常會去寫一個 event handler,然後讓該 element 的 onXXX event 被觸發時,會去 call 你寫的 event handler,但這樣子的動作,至少在 IE 與 Firefox 中是有一點不太一樣的..
假設我有個 div
element,我希望當滑鼠點到這個 div
的時候,秀出滑鼠的座標點,乍想之下可能會這樣寫:
[code lang=”xml”]
…
…
[/code]
這樣的 HTML+JavaScript 跑在 firefox 上面是沒有問題的,但在 IE 上就會跟你抱怨 e 沒有定義
。但因為用 IE 的人實在是太多了,不得不照顧一下 IE 的使用者,所以要改寫 handleClick
這個 function:
[code lang=”javascript”]
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);
}
[/code]
因為在 IE 裡,觸發 onXXX event 的時候並不會把 event object 傳到 function 裡,所以當我們發現 e 是 undefined 時,就補一個宣告給它囉。
要同時照顧不同瀏覽器還真是一件蠻辛苦的事..
呵呵 看來 你的這句代碼 不是自己剛寫的 而是從某個地方Co來的
::HLIGHT_BLOCK_1::
因為你在最后加上IE支持的時候 用的是e == undefined
要依你上邊的做法 應該這樣寫
::HLIGHT_BLOCK_2::
不是么
Avenger:
我不太懂你的意思耶, 不好意思 @@
看來我得重發一下代碼了 代碼外加上[code]結果顯示::HLIGHT_BLOCK_2::
function handleClick(e) {
e = e || event; // (event == window.event) is true on IE
我一直在RSS你的博客
你寫的東東都蠻不錯的 我很喜歡
恩 干巴爹!
@Avenger
你寫得沒錯, 不過 undefined 那裡是我自己寫的 Orz
@Avenger: 感謝支持 🙂
在實務上, 還可以加一個 Wrapper Function 來處理相容性的問題, 並可以提供額外的資料傳給您的 Event.
function _Event_Callback(bind, data) {
return function (event) {
event = event || window.event;
if( data != undefined ) event.data = data;
var args = [].slice.call( arguments, 1 );
args.unshift( event );
return bind.apply( this, args );
};
}
所以你原例子中的 onclick 可以寫成:
elem.onclick = _Event_Callback(handleClick);
如果想在 runtime 傳入資料, 則可寫成:
elem.onclick = _Event_Callback(handleClick, ‘racklin’);
這樣在 handleClick(e) 中, e.data 等於 racklin.
racklin: 非常感謝你補完 😀
我通常這麼做,程式碼比較簡潔,又可相容IE/FF:
function handleClick(event) {
var mouseX = event.pageX …..