Aplicaciones de Windows
Contraer la tabla de contenido
Expandir la tabla de contenido

Inicio rápido: Punteros (aplicaciones de la Tienda Windows con JavaScript y HTML)

En las aplicaciones de la Tienda Windows con JavaScript, las interacciones táctiles, del mouse y de lápiz o pluma se reciben, procesan y administran como entradas de puntero.

Guía básica: ¿Qué relación tiene este tema con los demás? Consulta el tema sobre la guía básica para aplicaciones de la Tienda Windows con JavaScript.

Nota  Las bibliotecas de control de marco proporcionan una experiencia de interacción de usuario de Windows 8 completa, que incluye interacciones estándar, efectos físicos animados y comentarios visuales. Si no requieres compatibilidad táctil personalizada, usa estos controles integrados. Si los controles de marco no son suficientes, estas directrices de interacción del usuario te ayudarán a proporcionar una experiencia de interacción atractiva y envolvente que es coherente en todos los modos de entrada:

Objetivo: Para obtener información sobre cómo escuchar y controlar la entrada de puntero.

Requisitos previos

Damos por sentado que puedes crear una aplicación básica de la Tienda Windows con JavaScript que use la plantilla de Biblioteca de Windows para JavaScript.

Tiempo para finalizar: 30 minutos.

Instrucciones

¿Qué es una entrada de puntero?

Mediante la unificación de las entradas táctiles, de mouse y de lápiz o pluma en una entrada de puntero abstracta puedes controlar las interacciones del usuario con tu aplicación independientemente del tipo de dispositivo de entrada que se esté usando.

Un objeto de puntero representa un "contacto" de entrada único y singular (un PointerPoint) de un dispositivo de entrada (como mouse, pluma/lápiz, un dedo o varios dedos). El sistema crea un puntero cuando se detecta un contacto por primera vez, y se lo destruye cuando se cancela el puntero o este deja el intervalo de detección. En el caso de dispositivos múltiples o entrada multitoque, cada contacto se trata como un solo puntero.

Existe un amplio conjunto de API para entrada de puntero que pueden interceptar datos de entrada en forma directa a partir de diversos dispositivos. Puedes controlar los eventos de puntero para obtener información común, como el tipo de dispositivo o la ubicación, e información extendida, como la geometría de contacto y la presión. Como en muchos casos las aplicaciones deben responder a distintos modos de entrada de diferentes maneras, también se encuentran disponibles propiedades de dispositivo específicas, como qué botón del mouse presionó un usuario o si un usuario está usando el extremo borrador del lápiz. Por ejemplo, se puede filtrar la entrada táctil para que sea compatible con interacciones como movimiento panorámico y desplazamiento, mientras que el mouse y la pluma/lápiz suelen resultar más adecuados para tareas precisas como escribir con lápiz y dibujar. Si tu aplicación necesita diferenciar entre distintos dispositivos de entrada y sus funcionalidades, consulta el tema de inicio rápido: identificación de dispositivos de entrada.

Si implementas tu propia compatibilidad con la interacción, ten presente que los usuarios esperan una experiencia intuitiva en la que interactúen en forma directa con los elementos de la interfaz de usuario de tu aplicación. Te recomendamos que modeles tus interacciones personalizadas sobre la base de los controles de marco para que todo sea coherente y pueda detectarse. Crea únicamente interacciones personalizadas si existe un requisito claro y bien definido y no hay ninguna interacción básica que sea compatible con el escenario.

Crear la interfaz de usuario

Para este ejemplo, usamos un rectángulo (targetContainer) como el objeto de destino de la entrada de puntero. El color del destino cambia cuando cambia el estado del puntero.

Se muestran detalles del puntero bajo el rectángulo y los eventos del puntero en sí se muestran a la izquierda del rectángulo (para informar la secuencia de eventos).

Este es el HTML para este ejemplo.


<html>
<head>
    <meta charset="utf-8" />
    <title>PointerInput</title>
    
    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.1.0/js/base.js"></script>
    <script src="//Microsoft.WinJSo.1.0/js/ui.js"></script>

    <!-- PointerInput references -->
    <link href="/css/default.css" rel="stylesheet" />
    <script src="/js/default.js"></script>
</head>
<body>
    <div id="eventLog"></div>
    <div class="TargetContainer" id="targetContainer"></div>
    <div class="PointerInfo" id="pointerInfo"></div>
</body>
</html>


Esta es la hoja de estilo en cascada (CSS) para este ejemplo.

Nota  Los eventos de puntero no se desencadenan durante una interacción de zoom o desplazamiento lateral. Puedes deshabilitar el zoom y el desplazamiento lateral en una región a través de las propiedades de CSS msTouchAction, overflow y -ms-content-zooming.


body {
    overflow: hidden;
    position: relative;
}

div#eventLog {
    position: absolute;
    left: 0px;
    top: 0px;
}


div.TargetContainer {
    -ms-transform-origin: 0% 0%;
    -ms-touch-action: none;
    position: absolute;
}

div.PointerInfo {
    position: absolute;
    background-color: black;
    font-size: 8pt;
    overflow: scroll;
    color: white;
}


Escuchar eventos de puntero

Este código establece la posición de ambos objetos y declara los diversos agentes de escucha de eventos de puntero para el destino.

Nota  En la mayoría de los casos, te recomendamos obtener información de puntero mediante los controladores de eventos de puntero de los marcos de lenguaje de Windows 8 que hayas elegido (aplicaciones de la Tienda Windows con JavaScript, aplicaciones de la Tienda Windows creadas para Windows con C++, C# o Visual Basic, o aplicaciones de la Tienda Windows creadas para Windows mediante DirectX con C++). El PointerPoint asociado con el controlador de eventos proporciona información en el contexto del elemento de interfaz de usuario de destino, mientras que los métodos PointerPoint (GetCurrentPoint y GetIntermediatePoints) proporcionan información en el contexto de la pantalla o ventana principal.

Primero, declaramos variables globales, inicializamos las áreas de detalles del puntero y el destino, e identificamos el registrador de eventos


    var _width = 640;
    var _height = 320;
    var _pointerHoverColor = "rgb(255, 255, 102)";
    var _pointerDownColor = "rgb(0, 255, 0)";
    var _pointerUpColor = "rgb(255, 0, 0)";
    var _pointerCancelColor = "rgb(0,0,0)";
    var _pointerOutColor = "rgb(127,127,127)";
    var _pointerOverColor = "rgb(0,0,255)";
    var _targetContainer;
    var _pointerInfo;
    var _pointerPoint;
    var _eventLog;

    function initialize() {
        // Configure the target.
        setTargetsContainer();

        // Configure the pointer details.
        setPointerInfo();

        // 
        _eventLog = document.getElementById("eventLog");
    }


Después, establecemos el objeto de destino y declaramos los diversos agentes de escucha de eventos de puntero para el destino.


    function setTargetsContainer() {
        //  Set up the target position and size.
        _targetContainer = document.getElementById("targetContainer");
        _targetContainer.style.backgroundColor = _pointerUpColor;
        _targetContainer.style.width = _width + "px";
        _targetContainer.style.height = _height + "px";
        _targetContainer.style.left = ((window.innerWidth - parseFloat(targetContainer.style.width)) / 2.0) + "px";

        // Expando property to track pointers.
        _targetContainer.pointers = [];

        // Declare pointer event handlers.
        _targetContainer.addEventListener("MSPointerDown", onMSPointerDown, true);
        _targetContainer.addEventListener("MSPointerHover", onMSPointerHover, true);
        _targetContainer.addEventListener("MSPointerOver", onMSPointerOver, true);
        _targetContainer.addEventListener("MSPointerUp", onMSPointerUp, true);
        _targetContainer.addEventListener("MSPointerOut", onMSPointerOut, true);
        _targetContainer.addEventListener("MSPointerCancel", onMSPointerCancel, true);
        _targetContainer.addEventListener("MSLostPointerCapture", onMSLostPointerCapture, true);
        _targetContainer.addEventListener("MSPointerMove", onMSPointerMove, true);
    }


Finalmente, establecemos el área de detalles del puntero.


    function setPointerInfo() {
        // Set up the pointer details position and size.
        _pointerInfo = document.getElementById("pointerInfo");
        _pointerInfo.style.width = _width + "px";
        _pointerInfo.style.height = _height + "px";
        _pointerInfo.style.left = _targetContainer.style.left;
        _pointerInfo.style.top = _targetContainer.offsetTop + _targetContainer.clientHeight + "px";
    }


Controlar eventos de puntero

A continuación, usamos comentarios de interfaz de usuario para demostrar controladores de eventos de puntero básicos.

  • Este controlador administra un evento de contacto de puntero (hacia abajo, presionado). Agregamos el evento al registro de eventos, agregamos el puntero a la matriz de punteros usada para realizar un seguimiento de los punteros de interés y mostramos los detalles de los punteros.

    Nota  Los eventos MSPointerDown y MSPointerUp no siempre se producen en pares. Tu aplicación debe escuchar y controlar cualquier evento que pueda dar conclusión a una acción de puntero abajo (como MSPointerUp, MSPointerOut, MSPointerCancel y MSLostPointerCapture).

    
        // MSPointerDown and MSPointerUp events do not always occur in pairs. 
        // Your app should listen for and handle any event that might conclude a pointer down action 
        // (such as MSPointerUp, MSPointerOut, MSPointerCancel, and MSLostPointerCapture).
        function onMSPointerDown(e) {
            // Update event sequence.
            _eventLog.innerText += "\nDown: " + e.pointerId;
    
            // Change background color of target when pointer contact detected.
            _targetContainer.style.backgroundColor = _pointerDownColor;
    
            // Check if pointer already exists (if enter occurred prior to down).
            var pointerExists = false;
            for (var i = 0; i < _targetContainer.pointers.length; i++) {
                if (e.pointerId === _targetContainer.pointers[i]) {
                    pointerExists = true;
                    break;
                }
            }
            // Push new pointer Id onto expando target pointers array.
            if (!pointerExists) {
                _targetContainer.pointers.push(e.pointerId);
    
                // Display pointer details.
                createInfoPop(e);
            }
        }
    
    
    
  • Este controlador administra un evento de mantenimiento de puntero. Agregamos el evento al registro de eventos, agregamos el puntero a la matriz de punteros y mostramos los detalles del puntero.

    
        // Fires when a pen device pointer enters detection range.
        function onMSPointerHover(e) {
            // Update event sequence.
            _eventLog.innerText += "\nHover: " + e.pointerId;
    
            // Update the UI and pointer details.
            _targetContainer.style.backgroundColor = _pointerHoverColor;
    
            // Check if pointer already exists.
            var pointerExists = false;
            for (var i = 0; i < _targetContainer.pointers.length; i++) {
                if (e.pointerId === _targetContainer.pointers[i]) {
                    pointerExists = true;
                    break;
                }
            }
            // Push new pointer Id onto expando target pointers array.
            if (!pointerExists) {
                _targetContainer.pointers.push(e.pointerId);
    
                // Display pointer details.
                createInfoPop(e);
            }
        }
    
    
    
  • Este controlador administra un evento de entrada (encima) de puntero. Agregamos el evento al registro de eventos, agregamos el puntero a la matriz de punteros y mostramos los detalles del puntero.

    
        function onMSPointerOver(e) {
            // Update event sequence.
            _eventLog.innerText += "\nOver: " + e.pointerId;
    
            if (_targetContainer.pointers.length === 0) {
                // Change background color of target when pointer contact detected.
                _targetContainer.style.backgroundColor = _pointerOverColor;
            }
    
            // Check if pointer already exists (if enter occurred prior to down).
            var pointerExists = false;
            for (var i = 0; i < _targetContainer.pointers.length; i++) {
                if (e.pointerId === _targetContainer.pointers[i]) {
                    pointerExists = true;
                    break;
                }
            }
            // Push new pointer Id onto expando target pointers array.
            if (!pointerExists) {
                _targetContainer.pointers.push(e.pointerId);
    
                // Display pointer details.
                createInfoPop(e);
            }
        }
    
    
    
  • Este controlador administra un evento de salida (arriba) de puntero. Agregamos el evento al registro de eventos, quitamos el puntero de la matriz de punteros y actualizamos los detalles del puntero.

    
        function onMSPointerUp(e) {
            // Update event sequence.
            _eventLog.innerText += "\nUp: " + e.pointerId;
    
            // Remove pointer from target pointers array.
            for (var i = 0; i < _targetContainer.pointers.length; i++) {
                if (e.pointerId === _targetContainer.pointers[i]) {
                    _targetContainer.pointers.splice(i, 1);
                    var pointerInfoPop = document.getElementById("infoPop" + e.pointerId);
                    if (pointerInfoPop === null)
                        return;
                    pointerInfoPop.removeNode(true);
                     // Update the UI and pointer details.
                    if (_targetContainer.pointers.length === 0) {
                        _targetContainer.style.backgroundColor = _pointerUpColor;
                    }
               }
            }
        }
    
    
    
  • Este controlador administra un evento de salida (afuera) de puntero. Agregamos el evento al registro de eventos, quitamos el puntero de la matriz de punteros y actualizamos los detalles del puntero.

    
        // Fires when pointer departs target detection (move and after up) or
        // a pointer in hover state departs detection range without making contact.
        function onMSPointerOut(e) {
            // Update event sequence.
            _eventLog.innerText += "\nPointer out: " + e.pointerId;
    
            // Remove pointer from target pointers array.
            for (var i = 0; i < _targetContainer.pointers.length; i++) {
                if (e.pointerId === _targetContainer.pointers[i])
                    _targetContainer.pointers.splice(i, 1);
            }
    
            // Update the UI and pointer details.
            if (_targetContainer.pointers.length === 0) {
                _targetContainer.style.backgroundColor = _pointerOutColor;
            }
            var pointerInfoPop = document.getElementById("infoPop" + e.pointerId);
            if (pointerInfoPop === null)
                return;
            pointerInfoPop.removeNode(true);
        }
    
    
    
  • Este controlador administra un evento de cancelación de puntero. Agregamos el evento al registro de eventos, quitamos el puntero de la matriz de punteros y actualizamos los detalles del puntero.

    
        // Fires for for various reasons, including: 
        //    - A touch contact is canceled by a pen coming into range of the surface.
        //    - The device doesn't report an active contact for more than 100ms.
        //    - The desktop is locked or the user logged off. 
        //    - The number of simultaneous contacts exceeded the number supported by the device.
        function onMSPointerCancel(e) {
            _eventLog.innerText += "\nPointer canceled: " + e.pointerId;
            for (var i = 0; i < _targetContainer.pointers.length; i++) {
                if (e.pointerId === _targetContainer.pointers[i])
                    _targetContainer.pointers.splice(i, 1);
            }
            if (_targetContainer.pointers.length === 0) {
                _targetContainer.style.backgroundColor = _pointerCancelColor;
            }
            var pointerInfoPop = document.getElementById("infoPop" + e.pointerId);
            if (pointerInfoPop === null)
                return;
            pointerInfoPop.removeNode(true);
        }
    
    
    
  • Este controlador administra un evento de captura de puntero perdido. Agregamos el evento al registro de eventos, quitamos el puntero de la matriz de punteros y actualizamos los detalles del puntero.

    Nota  MSLostPointerCapture puede producirse en lugar de MSPointerUp. Puede perderse la captura de puntero debido a las interacciones de usuario o porque se capturó mediante programación otro puntero o se liberó intencionalmente la captura del puntero actual.

    
        // Fires for for various reasons, including: 
        //    - User interactions
        //    - Programmatic caputre of another pointer
        //    - Captured pointer was deliberately released
        // MSLostPointerCapture can fire instead of MSPointerUp. 
        function onMSLostPointerCapture(e) {
            _eventLog.innerText += "\nLostPointerCapture: " + e.pointerId;
            for (var i = 0; i < _targetContainer.pointers.length; i++) {
                if (e.pointerId === _targetContainer.pointers[i])
                    _targetContainer.pointers.splice(i, 1);
            }
            if (_targetContainer.pointers.length === 0) {
                _targetContainer.style.backgroundColor = _pointerCancelColor;
                var pointerInfoPop = document.getElementById("infoPop" + e.pointerId);
                if (pointerInfoPop === null)
                    return;
                pointerInfoPop.removeNode(true);
            }
        }
    
    
    
  • Este controlador administra un evento de movimiento de puntero. Agregamos el evento al registro de eventos y actualizamos los detalles del puntero.

    
        function onMSPointerMove(e) {
            //_eventLog.innerText += "\nMove: " + e.pointerId;
            updateInfoPop(e);
        }
    
    
    

Obtener las propiedades del puntero

El marco de lenguaje que elijas para tu aplicación determina el modo en que se obtienen las propiedades de los punteros. Las aplicaciones de la Tienda Windows con JavaScript exponen muchas propiedades directamente a través del objeto de evento de puntero con las propiedades extendidas expuestas a través de los objetos PointerPoint y PointerPointProperties de Windows.UI.Input en Windows en tiempo de ejecución. Las aplicaciones de la Tienda Windows con C++, C# o Visual Basic deben obtener la mayoría de las propiedades de puntero a través de un objeto Windows.UI.Input.

Aquí consultamos diversas propiedades de puntero.


    function queryPointer(pointerevent) {
        _pointerPoint = Windows.UI.Input.PointerPoint.getCurrentPoint(pointerevent.pointerId);
        var details = "Pointer Id: " + pointerevent.pointerId;
        switch (pointerevent.pointerType) {
            case pointerevent.MSPOINTER_TYPE_MOUSE:
                details += "\nPointer type: mouse";
                break;
            case pointerevent.MSPOINTER_TYPE_PEN:
                details += "\nPointer type: pen";
                if (_pointerPoint.isInContact) {
                    details += "\nPressure: " + pointerevent.pressure;
                    details += "\nrotation: " + pointerevent.rotation;
                    details += "\nTilt X: " + pointerevent.tiltX;
                    details += "\nTilt Y: " + pointerevent.tiltY;
                    details += "\nBarrel button pressed: " +_pointerPoint.properties.isBarrelButtonPressed;
                }
                break;
            case pointerevent.MSPOINTER_TYPE_TOUCH:
                details += "\nPointer type: touch";
                details += "\nrotation: " + pointerevent.rotation;
                details += "\nTilt X: " + pointerevent.tiltX;
                details += "\nTilt Y: " + pointerevent.tiltY;
                break;
            default:
                details += "\nPointer type: " + "n/a";
                break;
        }
        details += "\nPointer location (screen): " + pointerevent.screenX + ", " + pointerevent.screenY;
        details += "\nPointer location (parent): " + pointerevent.offsetX + ", " + pointerevent.offsetY;
        return details;
    }


Ejemplo completo

A continuación se encuentra el código de JavaScript para este ejemplo. Consulta Temas relacionados en la parte inferior de esta página para obtener vínculos a muestras más complejas.


(function () {
    "use strict";
    var sampleTitle = "User interactions snippet host";

    var app = WinJS.Application;
    var activation = Windows.ApplicationModel.Activation;
    WinJS.strictProcessing();

    app.onactivated = function (args) {
        if (args.detail.kind === activation.ActivationKind.launch) {
            if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
                initialize();
            } else {
                // TODO: This application has been reactivated from suspension.
                // Restore application state here.
            }
            args.setPromise(WinJS.UI.processAll());
        }
    };

    var _width = 640;
    var _height = 320;
    var _pointerHoverColor = "rgb(255, 255, 102)";
    var _pointerDownColor = "rgb(0, 255, 0)";
    var _pointerUpColor = "rgb(255, 0, 0)";
    var _pointerCancelColor = "rgb(0,0,0)";
    var _pointerOutColor = "rgb(127,127,127)";
    var _pointerOverColor = "rgb(0,0,255)";
    var _targetContainer;
    var _pointerInfo;
    var _pointerPoint;
    var _eventLog;

    function initialize() {
        // Configure the target.
        setTargetsContainer();

        // Configure the pointer details.
        setPointerInfo();

        // 
        _eventLog = document.getElementById("eventLog");
    }

    function setTargetsContainer() {
        //  Set up the target position and size.
        _targetContainer = document.getElementById("targetContainer");
        _targetContainer.style.backgroundColor = _pointerUpColor;
        _targetContainer.style.width = _width + "px";
        _targetContainer.style.height = _height + "px";
        _targetContainer.style.left = ((window.innerWidth - parseFloat(targetContainer.style.width)) / 2.0) + "px";

        // Expando property to track pointers.
        _targetContainer.pointers = [];

        // Declare pointer event handlers.
        _targetContainer.addEventListener("MSPointerDown", onMSPointerDown, true);
        _targetContainer.addEventListener("MSPointerHover", onMSPointerHover, true);
        _targetContainer.addEventListener("MSPointerOver", onMSPointerOver, true);
        _targetContainer.addEventListener("MSPointerUp", onMSPointerUp, true);
        _targetContainer.addEventListener("MSPointerOut", onMSPointerOut, true);
        _targetContainer.addEventListener("MSPointerCancel", onMSPointerCancel, true);
        _targetContainer.addEventListener("MSLostPointerCapture", onMSLostPointerCapture, true);
        _targetContainer.addEventListener("MSPointerMove", onMSPointerMove, true);
    }

    function setPointerInfo() {
        // Set up the pointer details position and size.
        _pointerInfo = document.getElementById("pointerInfo");
        _pointerInfo.style.width = _width + "px";
        _pointerInfo.style.height = _height + "px";
        _pointerInfo.style.left = _targetContainer.style.left;
        _pointerInfo.style.top = _targetContainer.offsetTop + _targetContainer.clientHeight + "px";
    }

    // MSPointerDown and MSPointerUp events do not always occur in pairs. 
    // Your app should listen for and handle any event that might conclude a pointer down action 
    // (such as MSPointerUp, MSPointerOut, MSPointerCancel, and MSLostPointerCapture).
    function onMSPointerDown(e) {
        // Update event sequence.
        _eventLog.innerText += "\nDown: " + e.pointerId;

        // Change background color of target when pointer contact detected.
        _targetContainer.style.backgroundColor = _pointerDownColor;

        // Check if pointer already exists (if enter occurred prior to down).
        var pointerExists = false;
        for (var i = 0; i < _targetContainer.pointers.length; i++) {
            if (e.pointerId === _targetContainer.pointers[i]) {
                pointerExists = true;
                break;
            }
        }
        // Push new pointer Id onto expando target pointers array.
        if (!pointerExists) {
            _targetContainer.pointers.push(e.pointerId);

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

    function onMSPointerUp(e) {
        // Update event sequence.
        _eventLog.innerText += "\nUp: " + e.pointerId;

        // Remove pointer from target pointers array.
        for (var i = 0; i < _targetContainer.pointers.length; i++) {
            if (e.pointerId === _targetContainer.pointers[i]) {
                _targetContainer.pointers.splice(i, 1);
                var pointerInfoPop = document.getElementById("infoPop" + e.pointerId);
                if (pointerInfoPop === null)
                    return;
                pointerInfoPop.removeNode(true);
                 // Update the UI and pointer details.
                if (_targetContainer.pointers.length === 0) {
                    _targetContainer.style.backgroundColor = _pointerUpColor;
                }
           }
        }
    }

    // Fires when a pen device pointer enters detection range.
    function onMSPointerHover(e) {
        // Update event sequence.
        _eventLog.innerText += "\nHover: " + e.pointerId;

        // Update the UI and pointer details.
        _targetContainer.style.backgroundColor = _pointerHoverColor;

        // Check if pointer already exists.
        var pointerExists = false;
        for (var i = 0; i < _targetContainer.pointers.length; i++) {
            if (e.pointerId === _targetContainer.pointers[i]) {
                pointerExists = true;
                break;
            }
        }
        // Push new pointer Id onto expando target pointers array.
        if (!pointerExists) {
            _targetContainer.pointers.push(e.pointerId);

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


    // Fires when pointer departs target detection (move and after up) or
    // a pointer in hover state departs detection range without making contact.
    function onMSPointerOut(e) {
        // Update event sequence.
        _eventLog.innerText += "\nPointer out: " + e.pointerId;

        // Remove pointer from target pointers array.
        for (var i = 0; i < _targetContainer.pointers.length; i++) {
            if (e.pointerId === _targetContainer.pointers[i])
                _targetContainer.pointers.splice(i, 1);
        }

        // Update the UI and pointer details.
        if (_targetContainer.pointers.length === 0) {
            _targetContainer.style.backgroundColor = _pointerOutColor;
        }
        var pointerInfoPop = document.getElementById("infoPop" + e.pointerId);
        if (pointerInfoPop === null)
            return;
        pointerInfoPop.removeNode(true);
    }

    // Fires for for various reasons, including: 
    //    - A touch contact is canceled by a pen coming into range of the surface.
    //    - The device doesn't report an active contact for more than 100ms.
    //    - The desktop is locked or the user logged off. 
    //    - The number of simultaneous contacts exceeded the number supported by the device.
    function onMSPointerCancel(e) {
        _eventLog.innerText += "\nPointer canceled: " + e.pointerId;
        for (var i = 0; i < _targetContainer.pointers.length; i++) {
            if (e.pointerId === _targetContainer.pointers[i])
                _targetContainer.pointers.splice(i, 1);
        }
        if (_targetContainer.pointers.length === 0) {
            _targetContainer.style.backgroundColor = _pointerCancelColor;
        }
        var pointerInfoPop = document.getElementById("infoPop" + e.pointerId);
        if (pointerInfoPop === null)
            return;
        pointerInfoPop.removeNode(true);
    }

    // Fires for for various reasons, including: 
    //    - User interactions
    //    - Programmatic caputre of another pointer
    //    - Captured pointer was deliberately released
    // MSLostPointerCapture can fire instead of MSPointerUp. 
    function onMSLostPointerCapture(e) {
        _eventLog.innerText += "\nLostPointerCapture: " + e.pointerId;
        for (var i = 0; i < _targetContainer.pointers.length; i++) {
            if (e.pointerId === _targetContainer.pointers[i])
                _targetContainer.pointers.splice(i, 1);
        }
        if (_targetContainer.pointers.length === 0) {
            _targetContainer.style.backgroundColor = _pointerCancelColor;
            var pointerInfoPop = document.getElementById("infoPop" + e.pointerId);
            if (pointerInfoPop === null)
                return;
            pointerInfoPop.removeNode(true);
        }
    }


    function onMSPointerMove(e) {
        //_eventLog.innerText += "\nMove: " + e.pointerId;
        updateInfoPop(e);
    }

    function onMSPointerOver(e) {
        // Update event sequence.
        _eventLog.innerText += "\nOver: " + e.pointerId;

        if (_targetContainer.pointers.length === 0) {
            // Change background color of target when pointer contact detected.
            _targetContainer.style.backgroundColor = _pointerOverColor;
        }

        // Check if pointer already exists (if enter occurred prior to down).
        var pointerExists = false;
        for (var i = 0; i < _targetContainer.pointers.length; i++) {
            if (e.pointerId === _targetContainer.pointers[i]) {
                pointerExists = true;
                break;
            }
        }
        // Push new pointer Id onto expando target pointers array.
        if (!pointerExists) {
            _targetContainer.pointers.push(e.pointerId);

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


    function updateInfoPop(pointerevent) {
        var infoPop = document.getElementById("infoPop" + pointerevent.pointerId);
        if (infoPop === null)
            return;
        infoPop.innerText = queryPointer(pointerevent);
    }

    function createInfoPop(pointerevent) {
        // Create P and insert it into the document hierarchy.
        if (_pointerInfo === null)
            return;
        var infoPop = document.createElement("p");
        infoPop.setAttribute("id", "infoPop" + pointerevent.pointerId);
        _pointerInfo.appendChild(infoPop);
        infoPop.innerText = queryPointer(pointerevent);
    }

    function queryPointer(pointerevent) {
        _pointerPoint = Windows.UI.Input.PointerPoint.getCurrentPoint(pointerevent.pointerId);
        var details = "Pointer Id: " + pointerevent.pointerId;
        switch (pointerevent.pointerType) {
            case pointerevent.MSPOINTER_TYPE_MOUSE:
                details += "\nPointer type: mouse";
                break;
            case pointerevent.MSPOINTER_TYPE_PEN:
                details += "\nPointer type: pen";
                if (_pointerPoint.isInContact) {
                    details += "\nPressure: " + pointerevent.pressure;
                    details += "\nrotation: " + pointerevent.rotation;
                    details += "\nTilt X: " + pointerevent.tiltX;
                    details += "\nTilt Y: " + pointerevent.tiltY;
                    details += "\nBarrel button pressed: " +_pointerPoint.properties.isBarrelButtonPressed;
                }
                break;
            case pointerevent.MSPOINTER_TYPE_TOUCH:
                details += "\nPointer type: touch";
                details += "\nrotation: " + pointerevent.rotation;
                details += "\nTilt X: " + pointerevent.tiltX;
                details += "\nTilt Y: " + pointerevent.tiltY;
                break;
            default:
                details += "\nPointer type: " + "n/a";
                break;
        }
        details += "\nPointer location (screen): " + pointerevent.screenX + ", " + pointerevent.screenY;
        details += "\nPointer location (parent): " + pointerevent.offsetX + ", " + pointerevent.offsetY;
        return details;
    }
    app.start();
})();


Resumen y next steps

En inicio rápido, aprendiste acerca de la entrada de punteros en aplicaciones de la Tienda Windows con JavaScript.

Los eventos de puntero son útiles para administrar interacciones simples como pulsación, deslizamiento y demás interacciones específicas del dispositivo que incluyen la entrada desde botones de mouse secundarios, la rueda del mouse, botones de menú contextual de pluma y el borrador de la pluma.

Para controlar interacciones más elaboradas, como los gestos descritos en el lenguaje táctil de Windows 8, consulta los temas de inicio rápido: gestos y manipulaciones de DOM, inicio rápido: gestos estáticos e inicio rápido: gestos de manipulación.

Para obtener más información sobre el lenguaje táctil de Windows 8, consulta Diseño de interacción táctil.

Temas relacionados

Conceptual (JavaScript y HTML)
Responder a la interacción del usuario
Inicio rápido: gestos y manipulaciones de DOM
Inicio rápido: gestos estáticos
Inicio rápido: gestos de manipulación
Diseño de la interacción táctil
Muestras
Entrada: muestra de funcionalidades del dispositivo
Entrada: muestra de control de eventos de puntero y de gestos de DOM
Entrada: muestra de manipulaciones y gestos (JavaScript)
Entrada: muestra de gestos instanciables
Entrada: muestra de desplazamiento, desplazamiento lateral y zoom
Entrada: muestra de entrada de lápiz simplificada

 

 

Mostrar:
© 2018 Microsoft