實施範例10

10.正確使用腳本中對鍵盤和滑鼠的特定功能

這項技巧目的是講述了鍵盤和鼠標操作中可使用腳本代碼的特定狀態。同時使用鍵盤和鼠標的特定狀態,可以確保內容能廣泛地在不同的設備下操作。例如當按一下鍵盤或按一下滑鼠時,腳本便會執行相同的功能。

這項技巧不單只包含了鍵盤操控所要求的成功元素,同時也包含了其他設備的操作。

有些滑鼠功能會有着相對應的鍵盤功能,因此鍵盤事件處理程序可以執行與滑鼠事件處理程序相同的功能。

如下表所示:

使用… …相對應
mousedown keydown
mouseup keyup
click keypress
mouseover focus
mouseout Blur

某些滑鼠功能沒有相應的鍵盤功能,因此這些功能須要各自在不同的設備上執行。

範例:

範例一:
在以下的例子中,當用戶把鼠標移在圖像連結時,它會展示出另一張圖像;為了給鍵盤用戶有相同的體驗,當使用 tab 鍵跳到該連結時,圖像也會作出轉變。

範例代碼:

<a href="menu.php" onmouseover="swapImageOn('menu')" onfocus="swapImageOn('menu')"
onmouseout="swapImageOff('menu')" onblur="swapImageOff('menu')">
<img id="menu" src="menu_off.gif" alt="Menu" />
</a>

範例二:
這個例子展示了一張圖像,用戶可以使用鍵盤來執行此圖像的功能。鼠標事件onclick是從鍵盤事件onkeypress所複製的。而tabindex屬性則確保了鍵盤按鍵時會跳到該圖像上。在此例子中, nextpage()函數應檢查鍵盤是否被按動,否則當焦點落在圖像時,所有鍵盤動作均會被回應。

範例代碼:

<img onclick="nextPage();" onkeypress="nextPage();" tabindex="0" src="arrow.gif"
alt="Go to next page">

請注意:在此例子裡的圖像元素使用了tabindex,雖然目前這是無效的,這只是提供作為一個過渡的技巧使它得以運作。