2009年7月23日 星期四

當網頁裡event發生時 阻擋default action的執行

在網頁裡 一個event發生時 通常會有default action
例如在一個text element中打字 則會發生 onkeydown onkeypress onkeyup這三個事件
default action就是在輸入框裡顯示打入的字串

想要阻止瀏覽器的default action執行時 如果是用inline的方式註冊event handler 直接return false就可以了
例如 < input type="text" onkeypress="return false;" >

但如果使用addEventListener註冊 event handler 就需採用別的方法 而且IE和firefox必須用不同的方法
例如:
< input type="text" id="text_element" >

< script type="text/javascript" >
function foo(e)
{
if (e.preventDefault)
e.preventDefault(); //firefox
else
e.returnValue=false; //IE
}
document.getElementById('text_element').addEventListener('keypress', foo, false);
< /script >

W3C的標準是用event object的preventDefault method去阻擋掉default action的發生
但是IE並沒有實作這個method 不過IE的event object有returnValue這個property
將這個屬性設為false一樣可以阻擋掉default action的發生
因此可以用上面的寫法去支援IE與firefox

沒有留言:

張貼留言