快速入门:标识指针设备 (HTML)

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

本快速入门引导你完成对连接到你的用户系统的输入设备的标识。还介绍如何检索每个设备中影响用户与你的应用程序交互方式的功能和属性。

在 Windows 8 中,指针设备指的是提供鼠标、笔/触笔或触摸功能的一类设备。

在此上下文中,支持以下设备:

术语 描述

鼠标

标准的鼠标设备。

有关鼠标交互的具体信息,请参阅响应鼠标输入

笔/触笔

两种类型:

  • 电阻式数字化器的单一接触点、主动触笔输入(如支持悬停的触笔)。
  • 电容式数字化器的单一接触点、被动触笔输入。识别为触摸输入设备。

有关笔/触笔交互的具体信息,请参阅响应笔和触笔输入

触摸

单次触摸接触,或者同时进行多次触摸接触。

 

目标: 了解如何标识连接的输入设备及其功能。

先决条件

我们假设你可以创建使用 Windows JavaScript 库模板的使用 JavaScript 的基本 Windows 应用商店应用。

若要完成此教程,你需要:

说明

1. 检索鼠标属性

Windows.Devices.Input 命名空间包含 MouseCapabilities 类,该类用于检索由一个或多个连接的鼠标展示的属性。只需创建新的 MouseCapabilities 对象并获取感兴趣的属性。

注意  此处讨论的属性的返回值基于所有连接的鼠标:如果至少一个鼠标支持特定功能,则布尔属性返回 True,数值属性返回任何一个鼠标显示的最大值。

 

以下代码使用一系列 div 元素显示各个鼠标属性和值。

function getMouseProperties() {
  var mouseCapabilities = new Windows.Devices.Input.MouseCapabilities();
  id("mousePresent").innerHTML = (mouseCapabilities.mousePresent == true ? "True" : "False");
  id("verticalWheelPresent").innerHTML = (mouseCapabilities.verticalWheelPresent == true ? "True" : "False");
  id("horizontalWheelPresent").innerHTML = (mouseCapabilities.horizontalWheelPresent == true ? "True" : "False");
  id("swapButtons").innerHTML = (mouseCapabilities.swapButtons == true ? "True" : "False");
  id("numberOfButtons").innerHTML = mouseCapabilities.numberOfButtons;
}

2. 检索键盘属性

Windows.Devices.Input 命名空间包含 KeyboardCapabilities 类,该类用于检索键盘是否连接。只需创建新的 KeyboardCapabilities 对象并获取 KeyboardPresent 属性。

以下代码使用一个 div 元素显示键盘属性和值。

function getKeyboardProperties() {
  var keyboardCapabilities = new Windows.Devices.Input.KeyboardCapabilities();
  id("keyboardPresent").innerHTML = (keyboardCapabilities.keyboardPresent == true ? "True" : "False");
}

3. 检索触摸属性

Windows.Devices.Input 命名空间包含 TouchCapabilities 类,该类用于检索是否连接任何触摸数字化器。只需创建新的 TouchCapabilities 对象并获取感兴趣的属性。

注意  此处讨论的属性的返回值基于所有连接的触摸数字化器:如果至少一个数字化器支持特定功能,则布尔属性返回 True,数值属性返回任何一个数字化器显示的最大值。

 

以下代码使用一系列 div 元素显示触摸属性和值。

function getTouchProperties() {
  var touchCapabilities = new Windows.Devices.Input.TouchCapabilities();
  id("touchPresent").innerHTML = (touchCapabilities.touchPresent == true ? "True" : "False");
  id("contacts").innerHTML = touchCapabilities.contacts;
}

4. 检索指针属性

Windows.Devices.Input 命名空间包含 PointerDevice 类,该类用于检索是否连接任何支持指针输入的设备(触摸屏、笔或鼠标)。只需创建新的 PointerDevice 对象并获取感兴趣的属性。

注意  此处讨论的属性的返回值基于所有连接的指针设备:如果至少一个设备支持特定功能,则布尔属性返回 True,数值属性返回任何一个指针设备显示的最大值。

 

以下代码使用一个表格来显示每个指针设备的属性和值。

function getPointerDeviceProperties() 
{
  var pointerDevices = Windows.Devices.Input.PointerDevice.getPointerDevices();
  var htmlWrite = "";
  for (i = 0; i < pointerDevices.size; i++) 
  {
    var displayIndex = i + 1;
    htmlWrite += "<tr><td>(" + displayIndex + ") Pointer Device Type</td>  <td>" + 
      getPointerDeviceType(pointerDevices[i].pointerDeviceType) + "</td></tr>";
    htmlWrite += "<tr><td>(" + displayIndex + ") Is External</td><td>" + 
      (pointerDevices[i].isIntegrated == true ? "False" : "True") + "</td></tr>";
    htmlWrite += "<tr><td>(" + displayIndex + ") Max Contacts</td><td>" + 
      pointerDevices[i].maxContacts + "</td></tr>";
    htmlWrite += "<tr><td>(" + displayIndex + ") Physical Device Rect</td><td>" +
      pointerDevices[i].physicalDeviceRect.x + "," +
      pointerDevices[i].physicalDeviceRect.y + "," +
      pointerDevices[i].physicalDeviceRect.width + "," +
      pointerDevices[i].physicalDeviceRect.height + "</td></tr>";
    htmlWrite += "<tr><td>(" + displayIndex + ") Screen Rect</td><td>" +
      pointerDevices[i].screenRect.x + "," +
      pointerDevices[i].screenRect.y + "," +
      pointerDevices[i].screenRect.width + "," +
      pointerDevices[i].screenRect.height + "</td></tr>";
  }
  id("pointerDevices").innerHTML = htmlWrite;
}

有关完整示例,请参阅输入:设备功能示例

摘要

在本快速入门中,你创建了一系列基本函数,这些函数标识输入设备及其可用于你的应用的属性。

相关主题

概念

响应用户交互

开发 Windows 应用商店应用(JavaScript 和 HTML)

触控互动设计

参考

Windows.Devices.Input

示例 (DOM)

HTML 滚动、平移以及缩放示例

输入:DOM 指针和手势处理示例

输入:可实例化手势示例

示例(Windows 应用商店应用  API)

输入:设备功能示例