JavaScript 處理滑鼠滾輪教學文件
阿恆
Ajaxian 報導 Adomas Paltanavicius 寫了一篇用 JavaScript 處理滑鼠滾輪的教學文件。
現代的網頁發展得越來越像一個正規的應用程式,透過 JavaScript 和事件處理器(event handler)對各種輸入設備作出反應,例如:
- 鍵盤:keydown、keyup、keypress 等
- 滑鼠:mouseover、mouseout、mousedown、mouseup、click、dblclick 等
- 兩者兼顧:focus、blur、change、select 等
對於如何處理滑鼠滾輪,可以找到的資料很少,應用範例更少,Adomas Paltanavicius 的教學文件正好填補這方面的空白,他的方法甚至是跨平台、跨瀏覽器的。下面是他的範例程式:
|
|
範例中的事件處理函數 handle() 作甚麼工作當然由你們來編寫,它接受一個參數 delta,代表滾輪滾動的距離(也可叫作滾動的角度)。
正如左邊的圖像所示,滾輪向上滾動,delta 是正數,相反方向的話 delta 便是負數。習慣上當滾輪向上滾動的時候,頁面是向下滾動的;當滾輪向下滾動的時候,頁面則向上滾動,現在便用滑鼠試試看。
有些人會問 delta 的數值重要嗎?一般來說我們只需理會 delta 是正數還是負數,它的數值在大多數的情況下界乎 -1 至 +1 之間,但是在某些手提電腦,加上一些極端的滑鼠設定,得到數值可以甚為極端,曾經有人以極快的數度滾動滾輪得到數值 14,也有人在蘋果的 PowerBook 上得到 76 的巨大數值。若果滑鼠設定了加速功能,情況便更加混亂,例如以極慢的速度來滾動,你可能得到 +/-0.1,當速度增大三倍,你卻會得到 +/-30 的數值。Camino 和 Firefox 同樣使用 Gecko 引擎,但測試結果顯示兩者對於同樣的滾動速度得到的 delta 數值並不相同。為你使你的 JavaScript 在所有平台和瀏覽器都有相似的表現,我們建議只考慮 delta 是正數還是負數,不要根據 delta 的具體數值進行運算。
兼容性方面這個範例在以下的瀏覽器(及更新的版本)皆可正常運作:
- Internet Explorer 6
- Firefox 1.0
- Opera 9(較早期的版本並不兼容)
- Safari (?)
以下瀏覽器已知並不兼容:
- OmniWeb
- iCab
為了保持網頁的可用性,以下情況應盡力避免:
- 製作令用戶感到驚奇的效果:對於非專業的用戶來說,驚奇即等於不知所措,請盡力保留滾輪應有的、大眾接受的功能。例如在一個檔案名稱的菜單中,大部分人都認為滾輪是用來選擇檔案的,請不要改變這個功能。在一幅地圖中,很多人都習慣了用滾輪來放大/縮小,請保留這一項功能。
- 強迫用戶使用滾輪來完成作業:不是所有滑鼠都有滾輪的,甚至不是所有電腦都有滑鼠的(例如某些手帳系統)。
此外,若果網頁中有 layer 的話,最好全部加上 position:absolute,若果你的網頁需要上下滾動才能觀看的話,你可能會遇到大麻煩。