响应鼠标交互 (HTML)

[ 本文适用于编写 Windows 运行时应用的 Windows 8.x 和 Windows Phone 8.x 开发人员。如果你要针对 Windows 10 进行开发,请参阅 最新文档 ]

通过处理用于触摸和触笔输入的相同基本指针事件来响应使用 C++、C# 或 Visual Basic 的 Windows 应用商店应用中的鼠标输入。

这些常用事件使你能够实现基本输入功能,而无需为每个输入设备编写代码。但是,如果需要,你仍可以利用每个设备的特殊功能(如鼠标滚轮事件)。

提示  本主题中的信息特定于使用 JavaScript 开发 Windows 应用商店应用。

请参阅响应鼠标交互 (XAML),以了解使用 C++、C# 或 Visual Basic 的 Windows 应用商店应用。

请参阅开发鼠标控件 (DirectX 和 C++) 以了解结合使用 C++ 和 DirectX 的 Windows 应用商店应用。

 

先决条件: 如果你还不熟悉使用 JavaScript 开发 Windows 应用商店应用,则阅读这些主题来熟悉此处讨论的技术。

创建第一个采用 JavaScript 的 Windows 应用商店应用

采用 JavaScript 的 Windows 应用商店应用的路线图

通过快速入门:添加 HTML 控件并处理事件来了解事件

应用功能详细信息: 更深入地了解此功能以作为应用功能大全系列的一部分

用户交互详细信息 (HTML)

用户交互自定义详细信息 (HTML)

用户体验指南:

平台控件库(HTMLXAML)提供完全 Windows 用户交互体验,包括标准交互、动态显示的物理效果和视觉反馈。 如果你不需要自定义的交互支持,请使用这些内置控件。

如果平台控件不够,那么以下用户交互指南可以帮助你提供一种在各种输入模式上保持一致的令人信服的沉浸式交互体验。这些指南主要侧重于触摸输入,但也有与触摸板、鼠标、键盘和触笔输入相关的一些内容。

示例:Windows 应用商店应用示例中查看正在使用的功能。

用户交互自定义详细示例

输入:设备功能示例

输入:可实例化手势示例

输入:使用 GestureRecognizer 的笔势和操作

概述

鼠标输入最适合那些需要精确指向和单击的用户交互。由于 Windows 8 的 UI 针对触摸的不精确特性进行了优化,所以它自然支持这种固有的精确度。针对触摸输入优化 Window 应用商店应用设计,并在默认情况下获得基本的鼠标支持。

鼠标输入和触摸输入的不同之处在于,触摸可以通过对这些对象执行物理手势(如轻扫、滑动、拖动和旋转等等)模拟在屏幕上直接操作 UI 元素。

为了在强调直接操作的方案中支持鼠标交互,请使用特定于鼠标的 UI 为你的应用的用户提供等效功能,无论他们使用哪种设备。例如,当检测到鼠标时,使用滚动条模拟平移或者“上一页”和“上一页”按钮来翻阅内容网页。

关于支持鼠标交互的建议

下面是支持鼠标交互的用户体验指南。

Windows 8 鼠标语言

Windows 8 提供一组在整个系统中通用的简单鼠标交互功能。一致地应用此鼠标语言可让用户对你的应用感觉已经很熟悉。这会增加用户的信息并让你的应用更容易学习和使用。

术语 描述

悬停以了解

悬停在元素上可以显示更详细的信息或指导性可视化内容(如工具提示)而不提交操作。有关工具提示的详细信息,请参阅添加工具提示

单击以进行主操作

单击某个元素可以调用它的主操作(如启动应用或执行命令)。

滚动以更改视图

显示滚动条以在内容区域中向上、向下、向左和向右移动。用户可以通过单击滚动条或者旋转鼠标滚轮来滚动。滚动条可以指示当前视图在内容区域中的位置(一边触摸一边平移会显示类似的 UI)。

右键单击以选定和进行命令操作

右键单击可显示带有全局命令的应用栏。右键单击某个元素可将其选定并显示带有所选元素的上下文命令的应用栏。

注意  当选择或应用栏命令不适合 UI 行为时,右键单击可显示上下文菜单。但是,我们强烈建议你针对所有的命令行为使用应用栏。
 

使用 UI 命令进行缩放

显示应用栏中的 UI 命令(如 + 和 -),或者在按住 Ctrl 的情况下旋转鼠标滚轮模拟通过收缩和拉伸手势进行缩放。

使用 UI 命令进行旋转

显示应用栏中的 UI 命令,或者在按住 Ctrl+Shift 的情况下旋转鼠标滚轮模拟旋转手势来进行旋转。旋转设备本身会旋转整个屏幕。

单击并拖动以重新排列

单击并拖动元素可移动它。

单击并拖动以选择文本

在可选择的文本内单击并拖动可选择它。双击可选择一个字。

将鼠标移到角落和边缘以获得系统命令

在从左向右布局中,将鼠标移动到屏幕的右上角或右下角(或从右向左布局上的左边缘)将显示可以显示系统命令的超级按钮。

对于从左向右布局,将鼠标移到左上角(或者对于从右向左布局移到右上角)可显示最近用过的应用的缩略图。单击或单击并拖动可浏览和切换到正在运行的应用或者贴靠应用(如果屏幕分辨率支持的话)。

对于从左向右布局,将鼠标移到左下角(或者对于从右向左布局移到右下角)可显示“开始”屏幕的缩略图。

单击并从屏幕顶部边缘向底部 边缘拖动可关闭当前应用。

单击并从顶部边缘向下以及向左边缘或向右边缘拖动会将当前应用贴靠到屏幕一侧。

 

硬件

查询鼠标设备功能 (MouseCapabilities) 以确定鼠标硬件可以直接访问你的应用 UI 的哪些方面。有关查询设备功能的详细信息,请参阅快速入门:标识指针设备

一些鼠标设备有 5 个按钮。第四个和第五个按钮称为 X 按钮,通常用来在 Web 浏览器(如 Windows Internet Explorer)中前后导航。可将这些按钮与你的应用中的相应 UI(向前和向后按钮)相关联。

如果鼠标有滚轮按钮,向前和向后旋转会在内容区域中激活垂直(上下)滚动。 如果内容区域无法垂直滚动,则激活水平(左右)滚动。如果滚轮按钮是倾斜滚轮,则它应当仅激活水平滚动。

当用户按 Ctrl 修改键时,滚轮应当激活缩放(如果公开了此功能)。

视觉反馈

  • 当(通过移动或悬停事件)检测到鼠标时,显示特定于鼠标的 UI 以指示元素显示的功能。如果鼠标在一定的时间段内没有移动,或者如果用户启动了触摸交互,则让鼠标 UI 逐渐淡出。 这会使 UI 干净整洁。
  • 不要使用鼠标获取悬停反馈,由元素提供的反馈是足够的(请参阅下面的“光标”)。
  • 如果元素不支持交互(如静态文本),不要显示视觉反馈。
  • 不要将焦点矩形与鼠标交互结合使用。保留焦点矩形是为了进行键盘交互。
  • 对于所有代表相同输入目标的元素,同时显示视觉反馈。
  • 提供用来模拟基于触摸的操作 (如平移、旋转、缩放等)提供按钮(如 + 和 -)。

有关视觉反馈的更一般指南,请参阅视觉反馈指南

光标

为鼠标指针提供了一组标准光标。它们用来表示元素的主要操作。

每个标准光标都有一个与它相关联的默认图像。用户或应用可以随时替换与任何标准光标相关联的默认图像。Windows 应用商店应用通过 PointerCursor 函数指定光标图像。

如果你需要自定义以下鼠标光标:

  • 对于可单击的元素始终使用箭头光标 (箭头光标)。对于链接或其他交互元素不要使用指向手光标 (指向手光标),而应使用悬停效果(上文中有介绍)。
  • 对于可选择的文本使用文本光标 (文本光标)。
  • 当主要操作是移动(如拖动或裁剪)时,使用移动光标 (移动光标)。 对于主要操作是导航的元素(如“开始”磁贴),不使用移动光标。
  • 当对象的大小可调整时,使用水平、垂直和对角调整光标(垂直调整光标水平调整光标对角调整光标(左下和右上)对角调整光标(左上和右下))。
  • 当在固定画布(如地图)内平移内容时,使用手掌型光标(手掌型光标(张开)手掌型光标(闭合))。

命令

单击鼠标右键应当会激活应用的应用栏。避免接触应用中不接受右键单击的死区。有关应用栏的详细信息,请参阅添加应用栏

相关主题

响应用户交互