游標和指標

在非觸控螢幕裝置上,游標是使用者瞭解互動對象的重要方式。您也可以提供實用提示,說明如何與元素互動,或觸控板/滑鼠的移動方式會如何影響網站。

游標

瀏覽器會自動處理游標的一些常見用途。

如果你是在有游標的裝置上閱讀本文,請瀏覽頁面。您可能之前沒注意到游標的變化,但請注意游標提供的提示。當指標移至文字上方時,游標會變成選取 I 形梁,表示您可以選取文字。將游標懸停在連結上時,游標會變成食指指向的手,表示你可以採取動作。其他位置則會顯示預設游標,通常是箭頭。

隨著您製作的互動式網站越來越多,您會想要自訂游標,讓使用者更容易瞭解互動。

瀏覽器支援 cursor 屬性的一系列關鍵字,可提供拖曳、調整大小、選取等提示。

如果沒有任何支援的游標能傳達元素的互動行為,您也可以提供 SVG 或 PNG 圖片做為游標。

插入符號

插入號可用來顯示您在可編輯文字中的位置。這與游標不同,因為游標不會跟著滑鼠移動。你可以使用 caret-color 變更顏色。

回應使用者的指標輸入內容

使用滑鼠或觸控板時,使用者可以比使用觸控螢幕時更精確地與螢幕上的點互動。如果只針對滑鼠的精確度設計,有觸控螢幕或精細動作控制問題的使用者可能無法順利與網頁互動。

ボードのボタンが小さすぎる、またはインタラクティブ要素が近すぎるなどの問題がよく見られます。這會導致使用者難以與正確的元素互動。

確保按鈕和其他互動目標夠大,是確保網站易於存取的重要步驟。您也可以使用 pointerany-pointer 媒體查詢,根據使用者輸入裝置的精確度自訂樣式。

pointer 媒體功能是指使用者的主要輸入裝置,any-pointer 則是指所有輸入裝置。你可以將滑鼠等裝置與 fine 配對,觸控螢幕等裝置則與 coarse 配對。none 值表示使用者未透過指標使用輸入裝置。

指標和觸控事件

停用特定觸控螢幕手勢

使用觸控螢幕時,瀏覽器會處理一些常見手勢。舉例來說,用兩指觸控螢幕並分開,通常會放大網站。您不一定要在網站上實作這些行為,但在某些情況下,您可能會想停用或覆寫該行為。

如要選擇不讓瀏覽器處理某些動作,請列出您希望元素處理的動作。pan-xpan-y 可啟用單指平移手勢。這些手勢可與 pinch-zoom 一併啟用,以便使用多指縮放和平移功能。

manipulation 關鍵字等同於 pan-x pan-y pinch-zoommanipulation 排除其他需要短時間內多次觸控的觸控行為,例如輕觸兩下縮放。

touch-action 排除動作以停用瀏覽器處理動作後,即可為該動作設定指標事件。

停用所有事件和動作

在某些情況下,您可能要指定元素不具互動性。舉例來說,如果按鈕設為 pointer-events: none,您就無法點選按鈕,甚至無法觸發懸停狀態。

隨堂測驗

在觸控螢幕上,哪個屬性會控制手勢的指標事件?

pointer-events
答錯了。
manipulation
答案不對。
interactivity
答錯了。
touch-action
答對了!

如果使用者在同一部裝置上連接觸控螢幕和滑鼠做為次要輸入裝置,系統會比對哪些媒體查詢?

@media (pointer: coarse)
答對了!
@media (pointer: fine)
答錯了。
@media (any-pointer: coarse)
答對了!
@media (any-pointer: fine)
答對了!