本節將介紹鍵盤與滑鼠事件,以及相關範例。
我們可以偵測某一個特定按鍵是否被按下,其步驟如下:
- 利用 document.onkeydown 來抓到「按鍵事件」,並指定相關的事件處理程式。
- 在事件處理程式中,可以利用 window.event.keycode 來知道按鍵代碼,並進行相關的處理。
以下是一個具體範例,只要你按下任何一個鍵盤,就會顯示對應的代碼,如下:
上述範例的完整原始檔案如下:
在上述範例中,我們使用 onkeydown 事件來執行 keyFunction() 函數。特別要注意的是,如果事件處理程式回傳給 document.onkeydown 的值為 false,則原先按鍵的預設功能將會被取消。例如,上述範例的 Backspace(回到上一頁)的預設功能就已經被取消了。
有時候我們要定義一些「熱鍵」來執行特殊功能,但是這些熱鍵最好是複合鍵(先按 Shift 或 Ctrl 或 Alt 不放,再按任意鍵),以免蓋掉原有的預設功能,因此我們就要能夠偵測複合鍵常用的 Shift、Ctrl、Alt,可見下列範例:
上述範例的完整原始檔案如下:
由上述範例可知,我們可用 event.shiftKey、event.ctrlKey、event.altKey 的值是否是 true 來確認 Shift(鍵盤代碼是 16)、Ctrl(鍵盤代碼是 17)、Alt(鍵盤代碼是 18) 的按鍵是否是在被按下的狀態。類似的性質還有:
- event.shiftLeft:左邊的 Shift 鍵是否被按下
- event.ctrlLeft:左邊的 Ctrl 鍵是否被按下
- event.altLeft:左邊的 Alt 鍵是否被按下
以下是一個作弄人的網頁:
上述範例的完整原始檔案如下:
在上述範例中,我們使用 input 標籤的 onKeyPress 事件來即時改變使用者的輸入,並用 onKeyUp 事件來檢查使用者是否完成正確輸入。
在以下的網頁中,紅色方塊將隨著你的滑鼠移動:
上述範例的完整原始檔案如下:
在上述原始碼中,我們使用 id=redSquare 來代表紅色方塊,event.clientX 及 event.clientY 分別代表滑鼠相對應於網頁視窗的 X 和 Y 座標。
在以下的網頁中,你可以使用方向鍵(箭頭鍵)來移動網頁中的綠色方塊:
上述範例的完整原始檔案如下:
另外,利用 event.button,我們可以偵測使用者用來產生滑鼠事件的滑鼠鍵(左鍵或是右鍵),例如:
在上述範例中,使用不同滑鼠按鍵去點選文字,就會產生不同的警告視窗來顯示所用的滑鼠按鍵。上述範例的完整原始檔案如下:
在上述範例中,我們使用 event.button 來偵測滑鼠按鍵:
- event.button = 1 ===> 滑鼠左鍵被按下
- event.button = 2 ===> 滑鼠右鍵被按下
- event.button = 4 ===> 滑鼠中鍵被按下
為了防止(或是阻礙)使用者下載圖片或是檢視原始檔,我們可以取消滑鼠右鍵的預設功能,範例如下:
在上述範例中,我們使用 event.button 來偵測滑鼠鍵,如果是右鍵,則以警告視窗嘲笑使用者,並回傳 false,以取消預設之功能。當然,「道高一尺,魔高一丈」,若你還是執意要抓圖,在上述網頁按下 Ctrl-a,即可看到撇步。(由於篇幅有限,不再列出本範例之程式碼,你可以由範例網頁自行檢視原始碼。)
相關範例:
JavaScript 程式設計與應用:用於網頁用戶端