共用方式為


回應滑鼠互動 (HTML)

[ 本文的目標對象是撰寫 Windows 執行階段 App 的 Windows 8.x 和 Windows Phone 8.x 開發人員。如果您正在開發適用於 Windows 10 的 App,請參閱 最新文件 ]

處理用於觸控和手寫筆輸入的相同基本指標事件,即可回應使用 C++、C# 或 Visual Basic 的 Windows 市集應用程式中的滑鼠輸入。

這些常見的事件可讓您實作基本的輸入功能,不必為每一種輸入裝置撰寫程式碼。不過,您仍可視需要利用每一種裝置的特殊功能 (例如滑鼠滾輪事件)。

秘訣  這個主題的資訊是專門用來開發使用 JavaScript 的 Windows 市集應用程式。

對於使用 C++、C# 或 Visual Basic 的 Windows 市集應用程式,請參閱回應滑鼠互動 (XAML)

對於使用 DirectX 搭配 C++ 的 Windows 市集應用程式,請參閱開發滑鼠控制項 (DirectX 和 C++)

 

先決條件: 如果您是使用 JavaScript 開發 Windows 市集應用程式的新手,請仔細閱讀這些主題以熟悉這裡討論的技術。

使用 JavaScript 建立您的第一個 Windows 市集應用程式

使用 JavaScript 建立 Windows 市集應用程式的藍圖

請參閱快速入門:新增 HTML 控制項和處理事件以了解事件

應用程式功能,從開始到完成:應用程式功能,從開始到完成系列深入探索此功能。

使用者互動,從開始到完成 (HTML)

使用者互動自訂,從開始到完成 (HTML)

使用者經驗指導方針:

平台控制項程式庫 (HTMLXAML) 提供完整的 Windows 使用者互動體驗,包含標準互動、動畫物理效果及視覺化回饋。 如果您不需要自訂的互動支援,請使用這些內建控制項。

如果平台控制項不足,下列使用者互動指導方針能讓您在各種輸入模式下提供令人讚賞的沈浸式互動體驗。這些指導方針主要著重在觸控輸入,不過與觸控板、滑鼠、鍵盤和手寫筆輸入仍有相關。

範例:Windows 市集應用程式範例中,查看此功能的執行方式。

使用者互動自訂,從開始到完成範例

輸入:裝置功能範例

輸入:可具現化手勢範例

輸入:使用 GestureRecognizer 處理手勢與操作

概觀

滑鼠輸入最適合要求精確指向與按一下的使用者互動。Windows 8 的 UI 理所當然支援這種本有的精確度,Windows 8 已針對觸控的不精確本質最佳化。針對觸控輸入最佳化您的 Windows 市集應用程式設計,獲得預設的基本滑鼠支援。

滑鼠和觸控輸入的區別在於觸控能夠透過在這些物件上實際運用手勢 (如撥動、滑動、拖曳、旋轉等等),在畫面上模擬對 UI 元素的直接操作。

若要支援強調直接操作某個案例中的滑鼠互動,請使用滑鼠特定 UI,為您應用程式的使用者提供對等的功能,無論他們使用何種裝置。例如,當偵測到滑鼠使用捲軸,模擬移動瀏覽或 [上一頁] 和 [下一頁] 按鈕,以翻頁內容。

支援滑鼠互動的建議

以下為一些支援滑鼠互動的指導方針。

Windows 8 滑鼠語言

Windows 8 提供一組可用於整個系統的簡單滑鼠互動。在系統中一致地套用此滑鼠語言,可讓使用者對應用程式的操作方式感到很熟悉。這可讓使用者快速學會如何使用您的應用程式,進而提高使用者的信心。

詞彙 說明

暫留學習

暫留於某個元素上方可在不進行任何動作下,顯示更詳細的資訊或教學視覺物件 (例如工具提示)。如需工具提示的詳細資訊,請參閱新增工具提示

按滑鼠左鍵以執行主要動作

在元素上按滑鼠左鍵即可叫用它的主要動作 (例如啟動應用程式或執行命令)。

捲動以變更檢視

顯示捲軸,以在內容區域內上、下、左、右移動。使用者可以按捲軸或者滾動滑鼠滾輪來進行捲動。捲軸可以指出目前檢視在內容區域內的位置 (利用觸控進行移動瀏覽會顯示相似的 UI)。

按滑鼠右鍵選取與命令

按滑鼠右鍵可顯示其中包含全域命令的應用程式列。在某個元素上按一下滑鼠右鍵即可選取該元素,並且顯示其中包含所選元素之操作命令的應用程式列。

注意  如果選取的項目或應用程式列命令不是適當的 UI 行為,按滑鼠右鍵會顯示操作功能表。我們強烈建議您針對所有命令行為使用應用程式列。
 

用於縮放的 UI 命令

在應用程式列中顯示 UI 命令 (例如 + 和 -),或者按 Ctrl 並滾動滑鼠滾輪,以模擬用於縮放的捏合和伸展手勢。

用於旋轉的 UI 命令

在應用程式列中顯示 UI 命令,或者按 Ctrl+Shift 並滾動滑鼠滾輪,以模擬用於旋轉的轉動手勢。旋轉裝置本身即可旋轉整個螢幕。

按滑鼠左鍵並拖曳以重新排列

按滑鼠左鍵並拖曳元素來移動元素。

按滑鼠左鍵並拖曳以選取文字

在可選取的文字內按滑鼠左鍵並拖曳即可選取文字。按兩下即可選取某個字。

將滑鼠移至角落和邊緣以顯示系統命令

將滑鼠移至從左到右配置畫面的右上或右下角 (或從右至左配置的左邊緣),即可出現顯示系統命令的常用鍵。

將滑鼠移至從左到右配置的左上角 (或從右到左配置的右上角),即可顯示最近使用之應用程式的縮圖。按滑鼠左鍵或按住並拖曳來循環並切換至執行中應用程式,或者拖曳以貼齊應用程式 (若螢幕解析度支援的話)。

將滑鼠移至從左到右配置的左下角 (或從右到左配置的右下角),即可顯示 [開始] 畫面的縮圖。

按滑鼠左鍵從螢幕的上邊緣往下邊緣拖曳,即可關閉目前的應用程式。

按滑鼠左鍵並從上邊緣往下然後往左或往右邊緣拖曳,即可將目前的應用程式貼齊到螢幕的該側。

 

硬體

查詢滑鼠裝置的功能 (MouseCapabilities),了解滑鼠硬體可以直接存取應用程式 UI 的什麼層面。如需查詢裝置功能的詳細資訊,請參閱快速入門:識別指標裝置

某些滑鼠裝置有 5 個按鈕。第四和第五個按鈕 (稱為 X 按鈕),一般可以在網頁瀏覽器 (例如 Windows Internet Explorer) 中向後與向前瀏覽。請設定這兩個按鈕與應用程式中適當 UI (上一頁和下一頁按鈕) 的關聯。

如果滑鼠有滾輪按鈕,將向前和向後滾動設定為在內容區域內啟動垂直 (向上和向下) 捲動。 如果內容區域無法垂直捲動,會啟動水平 (向左和向右) 捲動。如果滾輪按鈕是傾斜滾輪,它只會啟動水平捲動。

當使用者按 Ctrl 輔助按鍵時,捲動滾輪會啟動縮放功能 (若已公開此功能)。

視覺化回饋

  • 偵測到滑鼠時 (透過移動或暫留事件),顯示滑鼠特定 UI,指示元素公開的功能。如果滑鼠有一段時間沒有移動,或者使用者起始觸控互動,讓滑鼠 UI 逐漸淡出。 這可以讓 UI 保持整齊、不凌亂。
  • 請勿為暫留回饋使用游標,元素提供的回饋已經足夠 (請參閱下方的游標說明)。
  • 如果元素不支援互動 (例如靜態文字),請勿顯示視覺化回饋。
  • 請勿搭配滑鼠互動使用焦點矩形。請保留這些給鍵盤互動。
  • 如果所有元素均代表相同的輸入目標,請同時顯示視覺化回饋。
  • 提供模擬觸控式操作 (例如移動瀏覽、旋轉、縮放等等) 的按鈕 (例如 + 和 -)。

如需視覺化回饋的詳細一般指導方針,請參閱視覺化回饋的指導方針

游標

我們提供了一組可用於滑鼠指標的標準游標。它們可用來指示元素的主要動作。

每一個標準游標都有與其關聯之相對應的預設影像。使用者或應用程式可以隨時取代任何標準游標的預設影像。Windows 市集應用程式透過 PointerCursor 函式指定游標影像。

如果您需要自訂滑鼠游標:

  • 對於可點選的元素,請一律使用箭頭游標 (箭頭游標)。對於連結或其他互動式元素,請勿使用指向手型游標 (指向手型游標)。請改為使用暫留效果 (描述如前)。
  • 對於可選取的文字,請使用文字游標 (文字游標)。
  • 移動若為主要動作 (例如拖曳或裁剪) 時,請使用移動游標 (移動游標)。 對於主要動作為瀏覽的元素 (例如 [開始] 畫面磚),請勿使用移動游標。
  • 物件為可調整大小時,請使用水平、垂直及對角線調整游標 (調整垂直大小游標調整水平大小游標對角線調整游標 (左下右上)對角線調整游標 (左上右下))。
  • 在固定畫布 (例如地圖) 內移動瀏覽內容時,請使用握拳游標 (握拳游標 (打開)握拳游標 (握緊))。

命令

按滑鼠右鍵應該能夠啟動應用程式的應用程式列。請不要讓不接受按滑鼠右鍵之應用程式的 UI 中有無作用區。如需應用程式列的詳細資訊,請參閱新增應用程式列

相關主題

回應使用者互動