通过

快速入门：指针 (HTML)

  • 项目

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

在使用 JavaScript 的应用中，触摸、鼠标和笔/触笔交互是作为指针输入进行接收、处理和管理的。

针对 Windows 8.1 进行的更新: Windows 8.1 针对指针输入 API 引入了多个更新和改善措施。请参阅 Windows 8.1 的 API 更改获取详细信息。

如果你刚开始使用 JavaScript 开发应用: 阅读这些主题来熟悉此处讨论的技术。

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

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

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

应用功能详细信息:

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

用户交互详细信息 (HTML)

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

用户体验指南:

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

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

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

用户交互自定义详细示例

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

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

输入：可实例化手势示例

输入：墨迹示例

输入：操作和手势 (JavaScript) 示例

输入：简化的墨迹示例

目标: 了解如何侦听和处理指针输入。

先决条件

我们假设，你可以使用 Windows JavaScript 库模板且采用 JavaScript 创建基本应用。

若要完成此教程，你需要：

完成所需时间: 30 分钟.

说明

什么是指针输入？

通过将鼠标、笔/触笔和触摸输入统一为抽象的指针输入，你可以独立于所使用的输入设备的类型处理用户与你的应用的交互。

指针对象表示输入设备（如鼠标、笔/触笔、单个手指或多个手指）的唯一一个输入“接触点”（一个 PointerPoint）。当第一次检测到一个接触时，系统将创建一个指针，并当指针离开检测范围或被取消时破坏它。如果出现多个设备或多点触控输入，则将每个联系人都视为唯一指针。

有很多基于指针的输入 API，可以使用它们直接从各种设备截获输入数据。你可以处理指针事件来获取诸如位置和设备类型等常见信息，以及诸如压力和接触几何形状等扩展信息。因为，在许多情况下，应用必须使用不同的方式对不同输入模式做出响应，所以还会提供诸如用户按哪个鼠标按钮或用户是否使用皮擦的笔尖等特定设备属性。例如，可以筛选触摸以便支持诸如平移和滚动之类的交互，而鼠标和笔/触笔通常更适合比较精确的任务，如墨迹和绘图。如果你的应用需要在输入设备与其功能之间进行区分，请参阅快速入门：标识输入设备。

如果你实现自己的交互支持，请记住，用户期望获得直观的体验，包括直接与应用中的 UI 元素交互。 我们建议你在框架控件上构建你的自定义交互的模型以保持内容一致和易于发现。仅当要求清楚、定义良好且基本交互不支持你的方案时才创建自定义交互。

创建 UI

对于此示例，我们使用一个矩形 (target) 作为指针输入的目标对象。当指针状态改变时，目标的颜色将改变。

每个指针的详细信息显示在位于指针附近的浮动文本块中，并伴随任何指针移动。特定的指针事件会报告到显示器的最右侧。以下屏幕截图显示本示例的 UI。

示例应用 UI 的屏幕截图

这是此示例的 HTML。

注意  Windows 应用商店应用

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>PointerInput_Universal.Windows</title>

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.2.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.2.0/js/ui.js"></script>

    <!-- PointerInput_Universal.Windows references -->
    <link href="/css/default.css" rel="stylesheet" />
    <script src="/js/default.js"></script>
</head>
<body class="windows">
    <div id="grid">
        <div id="targetContainer">
            <div id="target"></div>
        </div>
        <div id="bottom">
        </div>
        <div id="eventLog"></div>
    </div>
</body>
</html>

注意  Windows Phone 应用商店应用

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>PointerInput_Universal.WindowsPhone</title>

    <!-- WinJS references -->
    <!-- At runtime, ui-themed.css resolves to ui-themed.light.css or ui-themed.dark.css 
    based on the user’s theme setting. This is part of the MRT resource loading functionality. -->
    <link href="/css/ui-themed.css" rel="stylesheet" />
    <script src="//Microsoft.Phone.WinJS.2.1/js/base.js"></script>
    <script src="//Microsoft.Phone.WinJS.2.1/js/ui.js"></script>

    <!-- PointerInput_Universal.Phone references -->
    <link href="/css/default.css" rel="stylesheet" />
    <script src="/js/default.js"></script>
</head>
<body class="phone">
    <div id="grid">
        <div id="targetContainer">
            <div id="target"></div>
        </div>
        <div id="bottom">
        </div>
        <div id="eventLog"></div>
    </div>
</body>
</html>

这是此示例的级联样式表 (CSS)。

注意  在平移或缩放交互期间指针事件不会触发。你可以通过 CSS 属性 msTouchAction、overflow 和 -ms-content-zooming 禁用某个区域上的平移和缩放。

 

body {
    overflow: hidden;
    position: relative;
}

#grid {
    display: -ms-grid;
    height: 100vh; /* 100% of viewport height */
    -ms-grid-columns: 4fr 1fr; /* 2 columns */
    -ms-grid-rows: 1fr 320px 1fr;  /* 3 rows */
    /*touch-action: none;*/ /* Disable panning and zooming */
}
#targetContainer {
    border:solid;
    border-width:thin;
    border-color: red;
    -ms-grid-row: 2;
    -ms-grid-column: 1;
    -ms-grid-row-align: center;
    -ms-grid-column-align: center;
    /*touch-action: none; /* Disable panning and zooming */*/
}
#eventLog {
    -ms-grid-row: 1;
    -ms-grid-column: 2; 
    -ms-grid-row-span: 3;
    padding-right: 10px;
    background-color: black;
    color: white;
}
.phone #target {
    width: 200px;
    height: 300px;
    border: none;
    padding: 0px;
    margin: 0px;
    -ms-transform-origin: 0% 0%;
    /*touch-action: none; /* Disable panning and zooming */*/
}
.windows #target {
    width: 400px;
    height: 200px;
    border: none;
    padding: 0px;
    margin: 0px;
    -ms-transform-origin: 0% 0%;
    touch-action: none; /* Disable panning and zooming */
}

侦听指针事件

在大部分情况下，建议你通过选定的语言框架中指针事件处理程序的事件参数获取指针信息。

如果事件参数没有显示你的应用所需的指针详细信息，则可以通过 getCurrentPoint 和 getIntermediatePoints 方法或 currentPoint 和 intermediatePoints 属性访问事件参数中的扩展指针数据。我们推荐使用 getCurrentPoint 和 getIntermediatePoints 方法，因为你可以指定指针数据的上下文。

以下屏幕截图展示具有本例中鼠标指针详细信息的目标区域。

指针目标区域的屏幕截图。

下面，我们为目标区域设置屏幕位置和事件侦听程序。

首先，我们将声明全局变量，初始化目标和指针详细信息区域，并标识事件记录程序。

// For this example, we track simultaneous contacts in case the 
// number of contacts has reached the maximum supported by the device.
// Depending on the device, additional contacts might be ignored 
// (PointerPressed not fired). 
var numActiveContacts = 0;

// The input target.
var target;

// Target background colors corresponding to various pointer states.
var pointerColor = {
    hover: "rgb(255, 255, 102)",
    down: "rgb(0, 255, 0)",
    up: "rgb(255, 0, 0)",
    cancel: "rgb(0,0,0)",
    out: "rgb(127,127,127)",
    over: "rgb(0,0,255)"
};

// The event log (updated on each event).
var eventLog;

function initialize() {
    /// <summary>Set up the app.</summary>
    eventLog = document.getElementById("eventLog");
    target = document.getElementById("target");
    setTarget();
}

然后，我们设置目标对象，并为该目标声明各个指针事件侦听程序。

function setTarget() {
    /// <summary>Set up the target and interaction event handlers.</summary>

    // Initial color of target.
    target.style.backgroundColor = pointerColor.out;

    // Expando dictionary property to track active contacts. 
    // An entry is added during pointer down/hover/over events 
    // and removed during pointer up/cancel/out/lostpointercapture events.
    target.pointers = [];

    // Declare pointer event handlers.
    target.addEventListener("pointerdown", onPointerDown, true);
    target.addEventListener("pointerover", onPointerOver, true);
    target.addEventListener("pointerup", onPointerUp, true);
    target.addEventListener("pointerout", onPointerOut, true);
    target.addEventListener("pointercancel", onPointerCancel, true);
    target.addEventListener("lostpointercapture", onLostPointerCapture, true);
    target.addEventListener("pointermove", onPointerMove, true);
    target.addEventListener("wheel", onMouseWheel, false);
}

最后，我们将设置指针详细信息区域。

function createInfoPop(e) {
    /// <summary>
    /// Create and insert DIV into the DOM for displaying pointer details.
    /// </summary>
    /// <param name="e" type="Event">The event argument.</param>
    var infoPop = document.createElement("div");
    infoPop.setAttribute("id", "infoPop" + e.pointerId);

    // Set screen position of DIV.
    var transform = (new MSCSSMatrix()).translate(e.offsetX + 20, e.offsetY + 20);
    infoPop.style.msTransform = transform;
    target.appendChild(infoPop);

    infoPop.innerText = queryPointer(e);
}

function updateInfoPop(e) {
    /// <summary>
    /// Update pointer details in UI.
    /// </summary>
    /// <param name="e" type="Event">The event argument.</param>
    var infoPop = document.getElementById("infoPop" + e.pointerId);
    if (infoPop === null)
        return;

    // Set screen position of DIV.
    var transform = (new MSCSSMatrix()).translate(e.offsetX + 20, e.offsetY + 20);
    infoPop.style.msTransform = transform;
    infoPop.innerText = queryPointer(e);
}

处理指针事件

接下来，我们使用 UI 反馈来演示基本指针事件处理程序。

  • 此处理程序管理指针接触（向下，已按）事件。我们将事件添加到事件日志中，将指针添加到用于跟踪关注的指针的指针数组，并显示指针详细信息。

    注意  pointerdown 和 pointerup 事件并不总是成对出现。你的应用应该侦听和处理可能会结束指针向下操作（如 pointerup、pointerout、pointercancel 和 lostpointercapture）的所有事件。

     

    function onPointerDown(e) {
    /// <summary>
    /// Occurs for mouse when at least one mouse button is pressed or 
    /// for touch and pen when there is physical contact with the digitizer.
    /// For input devices that do not support hover, the pointerover event is 
    /// fired immediately before the pointerdown event.  
    /// Here, we  filter pointer input based on the first pointer type detected. 
    /// </summary>
    /// <param name="e" type="Event">The event argument.</param>

    // pointerdown and pointerup events do not always occur in pairs. 
    // Listen for and handle any event that might conclude a pointer down action 
    // (such as pointerup, pointerout, pointercancel, and lostpointercapture).
    //
    // For this example, we track the number of contacts in case the 
    // number of contacts has reached the maximum supported by the device.
    // Depending on the device, additional contacts might be ignored 
    // (PointerPressed not fired). 

    // Prevent the next handler in the hierarchy from receiving the event.
    e.cancelBubble = true;

    // Check if the number of supported contacts is exceeded.
    var touchCapabilities = new Windows.Devices.Input.TouchCapabilities();
    if ((touchCapabilities.touchPresent != 0) & (numActiveContacts > touchCapabilities.contacts)) {
        return;
    }

    // Update event details and target UI.
    eventLog.innerText += "\nDown: " + e.pointerId;
    target.style.backgroundColor = pointerColor.down;

    // Check if pointer already exists (if hover/over occurred prior to down).
    for (var i in target.pointers) {
        if (target.pointers[i].id = e.pointerId) {
            return;
        }
    }

    // Push new pointer Id onto expando target pointers array.
    target.pointers.push({ id: e.pointerId, type: e.pointerType });

    // Ensure that the element continues to receive PointerEvents 
    // even if the contact moves off the element. 
    // Capturing the current pointer can improve usability by reducing 
    // the touch precision required when interacting with an element.
    // Note: Only the assigned pointer is affected. 
    target.setPointerCapture(e.pointerId);

    // Display pointer details.
    createInfoPop(e);
}

  • 此处理程序管理处于接触状态并在目标边界内移动的指针的指针输入（在上方）事件。我们将事件添加到事件日志中，将指针添加指针数组，并显示指针详细信息。

    请参阅 pointermove 事件了解如何处理未处于接触状态但位于目标（通常为笔/触笔设备）边界内的指针的悬停状态。

    function onPointerOver(e) {
    /// <summary>
    /// Occurs when a pointer is detected within the hit test boundaries 
    /// of an element.
    /// Also occurs prior to a pointerdown event for devices that do not 
    /// support hover.  
    /// This event type is similar to pointerenter, but bubbles. 
    /// See the pointermove event for handling the hover state of a pointer 
    /// that is not in contact but is within the boundary of the target 
    /// (typically a pen/stylus device). 
    /// </summary>
    /// <param name="e" type="Event">The event argument.</param>

    // Prevent the next handler in the hierarchy from receiving the event.
    e.cancelBubble = true;

    // Update event details and target UI.
    eventLog.innerText += "\nOver: " + e.pointerId;

    if (target.pointers.length === 0) {
        // Change background color of target when pointer contact detected.
        if (e.getCurrentPoint(e.currentTarget).isInContact) {
            // Pointer down occured outside target.
            target.style.backgroundColor = pointerColor.down;
        } else {
            // Pointer down occured inside target.
            target.style.backgroundColor = pointerColor.over;
        }
    }

    // Check if pointer already exists.
    for (var i in target.pointers) {
        if (target.pointers[i].id = e.pointerId) {
            return;
        }
    }

    // Push new pointer Id onto expando target pointers array.
    target.pointers.push({ id: e.pointerId, type: e.pointerType });

    // Ensure that the element continues to receive PointerEvents 
    // even if the contact moves off the element. 
    // Capturing the current pointer can improve usability by reducing 
    // the touch precision required when interacting with an element.
    // Note: Only the assigned pointer is affected. 
    target.setPointerCapture(e.pointerId);

    // Display pointer details.
    createInfoPop(e);
}

  • 此处理程序管理指针移动事件。将事件添加到事件日志并更新指针详细信息（针对悬停，我们还将指针添加到指针数组中）。

    MSPointerHover 在 Windows 8.1 中已被弃用。使用 pointermove 和 IsInContact 指针属性来确定悬停状态。

    注意   此处理程序还处理同时多鼠标按钮单击事件。鼠标输入与第一次检测到鼠标输入时分配的单个指针 相关联。交互期间单击其他鼠标按钮（左键、 滚轮或右键）将通过指针按下事件在这些按钮和指针间创建 第二个关联。 指针释放事件仅在与交互关联的最后一个鼠标按钮（不一定是初始按钮） 释放时引发。 由于此排他性关联，其他鼠标按钮单击事件 将通过指针移动事件路由。

     

     function onPointerMove(e) {
     /// <summary>
     /// Occurs when a pointer moves within the hit test boundaries 
     /// of an element.
     /// </summary>
     /// <param name="e" type="Event">The event argument.</param>

     // NOTE: Multiple, simultaneous mouse button inputs are processed here.
     // Mouse input is associated with a single pointer assigned when 
     // mouse input is first detected. 
     // Clicking additional mouse buttons (left, wheel, or right) during 
     // the interaction creates secondary associations between those buttons 
     // and the pointer through the pointer pressed event. 
     // The pointer released event is fired only when the last mouse button 
     // associated with the interaction (not necessarily the initial button) 
     // is released. 
     // Because of this exclusive association, other mouse button clicks are 
     // routed through the pointer move event.  

     // Prevent the next handler in the hierarchy from receiving the event.
     e.cancelBubble = true;

     if (e.pointerType == "mouse") {
         // Mouse button states are extended PointerPoint properties.
         var pt = e.getCurrentPoint(e.currentTarget);
         var ptProperties = pt.properties;
         if (ptProperties.isLeftButtonPressed) {
             eventLog.innerText += "\nLeft button: " + e.pointerId;
         }
         if (ptProperties.isMiddleButtonPressed) {
             eventLog.innerText += "\nWheel button: " + e.pointerId;
         }
         if (ptProperties.isRightButtonPressed) {
             eventLog.innerText += "\nRight button: " + e.pointerId;
         }
     }
     // Handle hover state of a pointer that is not in contact but is within 
     // the boundary of the target (typically a pen/stylus device). 
     if (e.pointerType == "pen") {
         var pt = e.getCurrentPoint(e.currentTarget);
         if (pt.isInContact == false) {
             // Update event details and target UI.
             target.style.backgroundColor = pointerColor.hover;
             eventLog.innerText = "\nHover: " + e.pointerId;

             // Check if pointer already exists.
             for (var i in target.pointers) {
                 if (target.pointers[i].id = e.pointerId) {
                     updateInfoPop(e);
                     return;
                 }
             }

             target.pointers.push({ id: e.pointerId, type: e.pointerType });

             // Ensure that the element continues to receive PointerEvents 
             // even if the contact moves off the element. 
             // Capturing the current pointer can improve usability by reducing 
             // the touch precision required when interacting with an element.
             // Note: Only the assigned pointer is affected. 
             target.setPointerCapture(e.pointerId);
         }
     }

     // Display pointer details.
     updateInfoPop(e);
 }

  • 此处理程序管理鼠标滚轮事件（旋转）。我们将该事件添加到事件日志，将指针添加到指针数组（如有必要），并显示指针详细信息。

    function onMouseWheel(e) {
    /// <summary>  
    /// Occurs when the mouse wheel is rotated. 
    /// </summary> 
    /// <param name="e" type="Event">The event argument.</param>
    // Check if a mouse pointer already exists.
    for (var i in target.pointers) {
        // Ensure existing pointer type registered with pointerover is mouse. 
        if (target.pointers[i].type === "mouse") {
            e.pointerId = target.pointers[i].id;
            break;
        }
    }
    eventLog.innerText += "\nMouse wheel: " + e.pointerId;
    // For this example, we fire a corresponding pointer down event.
    onPointerDown(e);
}

  • 此处理程序管理指针离开（向上）事件。我们将事件添加到事件日志中，从指针数组删除指针，并更新指针详细信息。

    function onPointerUp(e) {
    /// <summary>
    /// Occurs for mouse at transition from at least one button pressed 
    /// to no buttons pressed.
    /// Occurs for touch and pen when contact is removed from the digitizer. 
    /// For input devices that do not support hover, the pointerout event 
    /// is fired immediately after the pointerup event.  
    /// </summary>
    /// <param name="e" type="Event">The event argument.</param>

    // Prevent the next handler in the hierarchy from receiving the event.
    e.cancelBubble = true;

    // Update event details.
    eventLog.innerText += "\nUp: " + e.pointerId;

    // If event source is mouse pointer and the pointer is still 
    // over the target, retain pointer and pointer details.
    // Return without removing pointer from pointers dictionary.
    // For this example, we assume a maximum of one mouse pointer.
    if ((e.pointerType === "mouse") &
        (document.elementFromPoint(e.x, e.y) === target)) {
        target.style.backgroundColor = pointerColor.up;
        return;
    }

    // Ensure capture is released on a pointer up event.
    target.releasePointerCapture(e.pointerId);

    // Remove pointer from pointers dictionary.
    var targetPointers = target.pointers;
    for (var i in targetPointers) {
        if (target.pointers[i].id === e.pointerId) {
            target.pointers.splice(i, 1);
            var pointerInfoPop = document.getElementById("infoPop" + e.pointerId);
            if (pointerInfoPop === null)
                return;
            pointerInfoPop.removeNode(true);
        }
    }

    // Update target UI.
    if (target.pointers.length === 0) {
        target.style.backgroundColor = pointerColor.up;
    }
}

  • 此处理程序管理指针离开（向外）事件。我们将事件添加到事件日志中，从指针数组删除指针，并更新指针详细信息。

    function onPointerOut(e) {
    /// <summary>
    /// Occurs when a pointer (in contact or not) moves out of the 
    /// target hit test boundary, after a pointerup event for a device 
    /// that does not support hover, and after a pointercancel event. 
    /// This event type is similar to pointerleave, but bubbles.  
    /// Note: Pointer capture is maintained until pointer up event.
    /// </summary>
    /// <param name="e" type="Event">The event argument.</param>

    // Prevent the next handler in the hierarchy from receiving the event.
    e.cancelBubble = true;

    // Update event details.
    eventLog.innerText += "\nPointer out: " + e.pointerId;

    // Remove pointer from pointers dictionary.
    var targetPointers = target.pointers;
    for (var i in targetPointers) {
        if (target.pointers[i].id === e.pointerId) {
            target.pointers.splice(i, 1);
            var pointerInfoPop = document.getElementById("infoPop" + e.pointerId);
            if (pointerInfoPop === null)
                return;
            pointerInfoPop.removeNode(true);

            // Update target UI.
            if (target.pointers.length === 0) {
                target.style.backgroundColor = pointerColor.out;
            }
        }
    }
}

  • 此处理程序管理指针取消事件。我们将事件添加到事件日志中，从指针数组删除指针，并更新指针详细信息。

    function onPointerCancel(e) {
    /// <summary>
    /// Occurs when a pointer is removed.
    /// The app will not receive subsequent events for that pointer, including pointerup.  
    /// </summary>
    /// <param name="e" type="Event">The event argument.</param>

    // A pointer can be canceled as a result of one of the following:
    //    - A touch contact is canceled when a pen is detected.
    //    - More than 100ms has passed since the device reported
    //      an active contact.
    //    - The desktop is locked or the user logged off. 
    //    - The number of simultaneous contacts exceeds the number 
    //      supported by the device.
    //    - The system has determined that a pointer is unlikely to 
    //      continue to produce events (for example, due to a hardware event).
    //    - After a pointerdown event, the pointer is subsequently used to 
    //      manipulate the page viewport (for example, panning or zooming).  

    // Prevent the next handler in the hierarchy from receiving the event.
    e.cancelBubble = true;

    // Update event details.
    eventLog.innerText += "\nPointer canceled: " + e.pointerId;

    // Ensure capture is released on a pointer cancel event.
    target.releasePointerCapture(e.pointerId);

    // Update target UI.
    if (target.pointers.length === 0) {
        target.style.backgroundColor = pointerColor.cancel;
    }

    // Remove pointer from pointers dictionary.
    var targetPointers = target.pointers;
    for (var i in targetPointers) {
        if (target.pointers[i].id === e.pointerId) {
            target.pointers.splice(i, 1);
            var pointerInfoPop = document.getElementById("infoPop" + e.pointerId);
            if (pointerInfoPop === null)
                return;
            pointerInfoPop.removeNode(true);

            // Update target UI.
            if (target.pointers.length === 0) {
                target.style.backgroundColor = pointerColor.out;
            }
        }
    }
}

  • 此处理程序管理丢失的指针捕获事件。我们将事件添加到事件日志中，从指针数组删除指针，并更新指针详细信息。

    注意  lostpointercapture（而不是 pointerup）可能会出现。指针捕获可能会因用户交互而丢失，或者因为以编程方式捕获了另一个指针而丢失，或者因为当前指针捕获被故意释放而丢失。

     

    function onLostPointerCapture(e) {
    /// <summary>
    /// Occurs after pointer capture is released for the pointer.  
    /// </summary>
    /// <param name="e" type="Event">The event argument.</param>

    // lostpointercapture can fire instead of pointerup. 

    // Pointer capture can be lost as a result of one of the following:
    //    - User interactions
    //    - Programmatic caputre of another pointer
    //    - Captured pointer was deliberately released

    // Prevent the next handler in the hierarchy from receiving the event.
    e.cancelBubble = true;

    // Update event details.
    eventLog.innerText += "\nLost pointer capture: " + e.pointerId;

    // We need the device type to handle lost pointer capture from mouse input.
    // Use the getCurrentPoint method over currentPoint property to ensure
    // the coordinate space is in relation to the target element.
    // Note: getCurrentPoint and currentPoint are only available in the 
    // local compartment, they are not available in the web compartment.
    var ptTarget = e.getCurrentPoint(e.currentTarget);
    var ptContainer = e.getCurrentPoint(document.getElementsByTagName("body")[0]);

    // If event source is mouse pointer and the pointer is still over 
    // the target, retain pointer and pointer details.
    // For this example, we assume only one mouse pointer.
    if ((ptTarget.pointerDevice.pointerDeviceType === Windows.Devices.Input.PointerDeviceType.mouse) &
        (document.elementFromPoint(ptContainer.position.x, ptContainer.position.y) === target)) {
        target.setPointerCapture(e.pointerId);
        return;
    }

    // Remove pointer from pointers dictionary.
    var targetPointers = target.pointers;
    for (var i in targetPointers) {
        if (target.pointers[i].id === e.pointerId) {
            target.pointers.splice(i, 1);
            var pointerInfoPop = document.getElementById("infoPop" + e.pointerId);
            if (pointerInfoPop === null)
                return;
            pointerInfoPop.removeNode(true);
        }
    }

    // Update target UI.
    if (target.pointers.length === 0) {
        target.style.backgroundColor = pointerColor.cancel;
    }
}

获取指针属性

你为你的应用选择的语言框架指示你获取指针属性的方式。许多属性通过指针事件对象直接展示。如前面所述，其他指针信息可以通过 getCurrentPoint 和 getIntermediatePoints 方法或事件参数的 currentPoint 和 intermediatePoints 属性获取。我们推荐使用 getCurrentPoint 和 getIntermediatePoints 方法，因为你可以指定指针数据的上下文。

在这里，我们查询直接来自事件对象的各种指针属性和仅通过 PointerPoint 和 PointerPointProperties 对象可用的扩展属性。

function queryPointer(e) {
    /// <summary>
    /// Get extended pointer data.
    /// </summary>
    /// <param name="e" type="Event">The event argument.</param>

    // We get the extended pointer info through the getCurrentPoint method
    // of the event argument. (We recommend using getCurrentPoint 
    // to ensure the coordinate space is in relation to the target.)
    // Note: getCurrentPoint and currentPoint are only available in the 
    // local compartment, they are not available in the web compartment.

    var pt = e.getCurrentPoint(e.currentTarget);
    var ptTargetProperties = pt.properties;

    var details = "Pointer Id: " + e.pointerId;
    switch (e.pointerType) {
        case "mouse":
            details += "\nPointer type: mouse";
            details += "\nLeft button: " + ptTargetProperties.isLeftButtonPressed;
            details += "\nRight button: " + ptTargetProperties.isRightButtonPressed;
            details += "\nWheel button: " + ptTargetProperties.isMiddleButtonPressed;
            details += "\nX1 button: " + ptTargetProperties.isXButton1Pressed;
            details += "\nX2 button: " + ptTargetProperties.isXButton2Pressed;
            break;
        case "pen":
            details += "\nPointer type: pen";
            if (pt.isInContact) {
                details += "\nPressure: " + ptTargetProperties.pressure;
                details += "\nrotation: " + ptTargetProperties.rotation;
                details += "\nTilt X: " + ptTargetProperties.xtilt;
                details += "\nTilt Y: " + ptTargetProperties.ytilt;
                details += "\nBarrel button pressed: " + ptTargetProperties.isBarrelButtonPressed;
            }
            break;
        case "touch":
            details += "\nPointer type: touch";
            details += "\nPressure: " + ptTargetProperties.pressure;
            details += "\nrotation: " + ptTargetProperties.rotation;
            details += "\nTilt X: " + ptTargetProperties.xtilt;
            details += "\nTilt Y: " + ptTargetProperties.ytilt;
            break;
        default:
            details += "\nPointer type: " + "n/a";
            break;
    }
    details += "\nPointer location (target): " + e.offsetX + ", " + e.offsetY;
    details += "\nPointer location (screen): " + e.screenX + ", " + e.screenY;

    return details;
}

请参阅此页面底部的相关主题，获取到更复杂的示例的链接。

完整示例

请参阅指针完整代码。

摘要和后续步骤

在本快速入门中，你学习了在使用 JavaScript 的应用中的指针输入。

指针事件对于管理简单的交互（如点击、滑动）和其他特定于设备的交互（包括来自辅助鼠标按钮、鼠标滚轮、笔桶按钮和笔橡皮擦的输入）很有用。

有关处理更加精巧的交互（如 Windows 8 触摸语言中所描述的手势），请参阅快速入门：DOM 手势和操作、快速入门：静态手势和快速入门：操作手势。

有关 Windows 8 触摸语言的详细信息，请参阅触摸交互设计。

相关主题

开发人员

响应用户交互

开发 Windows 应用商店应用（JavaScript 和 HTML）

快速入门：DOM 手势和操作

快速入门：静态手势

快速入门：操作手势

设计器

触摸交互设计