書:”Pro JavaScript Techniques 精通JavaScript”之重載瀏覽器預設行為

瀏覽器的預設行為可以歸結為沒有明確指令而瀏覽器自動執行所有這些行為.以下是一些不同事件的不同類型預設行為的例子:

1.點擊<a>元素將重新導向到它的href特性上的URL

2.使用鍵盤並按Ctrl+S,瀏覽器將儲存網站的HTML檔案

3.提交HTML<form>將向指定的URL提交資料,並重新導向瀏覽器到該地址上

4.滑鼠移動到一個有alt或title(取決於瀏覽器)<img>上將會出現工具條,提示<img>描述

    就算阻止事件冒泡或者完全沒有綁定事件,瀏覽器還是會執行所有這些行為.這會在你的指令碼中引發重大問題.如果希望提交表單的表現標新立異,或者想要<a>元素表現與眾不同,而非其原有的意圖?因為取消事件冒泡並不能防止預設行為,你需要一些特定的代碼直接處理.就如取消冒泡事件一樣,有兩種阻止發生預設行為的途徑:IE的特定方式和W3C的方式.兩種方式均在代碼清單6-8中展示.該函數帶一個傳入事件處理函數的事件對象參數,且應在時間處理函數的末尾使用,比如: return stopDefault(e); ------因為處理函數同時需要返回false(false本身也從stopDefault返回)

代碼清單6-8 防止發生預設瀏覽器行為的通用函數

function stopDefault(e){

            //防止預設瀏覽器行為(W3C)

            if (e&&e.preventDefault)

                e.preventDefault();

            //IE中阻止瀏覽器行為的捷徑

            else

                window.event.returnValue=false;

            return false;

}

使用StopEvent函數,就可以阻止瀏覽器的任何預設行為了.這可以讓你為使用者編寫一些巧妙的互動,如代碼清單6-9所示的例子.該代碼使所有的連結在一個內建的<iframe>中載入,而不是重裝入整個頁面.這麼做能讓使用者保持在一個頁面上,因此也可能獲得某種情況下更佳的互動體驗

代碼清單6-9 使用stopDefault()重載瀏覽器功能

//假設頁面中已經存在一個iframe,它的id是'iframe'

var iframe=document.getElementById("iframe");

//定位頁面上所有的<a>元素

var a=document.getElementsByTagName("a");

for (var i=0;i<a.length;i++) {

       //為<a>綁定點擊處理函數

       a[i].onclick=function(e){

              //設定iframe的地址

             iframe.src=this.href;

             //防止瀏覽器訪問<a>所指向的網站(這是一個預設行為)

                   return stopDefault(e);

       };

}