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.

Actualizaciones para Windows 8.1:  Windows 8.1 incorpora varias actualizaciones y mejoras para las API para entrada de puntero. Para obtener más información, consulta el tema sobre cambios en las API para Windows 8.1.

Guía básica:  Consulta la relación de este tema con los demás.

Nota  Las bibliotecas de control de la plataforma (HTML y XAML) proporcionan una experiencia de interacción del usuario de Windows completa, incluidas 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 la plataforma no son suficientes, estas directrices para la interacción del usuario te pueden ayudar a proporcionar una experiencia de interacción atractiva y envolvente que sea 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.

Para completar este tutorial, necesitas:

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 (target) como el objeto de destino de la entrada de puntero. El color del destino cambia cuando cambia el estado del puntero.

Se muestran detalles de cada puntero en un bloque de texto flotante que se encuentra situado al lado del puntero y sigue cualquier movimiento de este. Los eventos de puntero específicos aparecen en el extremo derecho de la pantalla. La siguiente captura de pantalla muestra la interfaz de usuario para este ejemplo.

Captura de pantalla de la interfaz de usuario de la aplicación de ejemplo.

Este es el HTML para este ejemplo.


<html>
<head>
    <meta charset="utf-8" />
    <title>PointerInput</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.WinJSo.1.0/js/ui.js"></script>

    <!-- PointerInput references -->
    <link href="/css/default.css" rel="stylesheet" />
    <script src="/js/default.js"></script>
</head>
<body id="app">
    <div id="grid">
        <div id="targetContainer">
            <div id="target"></div>
        </div>
        <div id="bottom">
        </div>
        <div id="eventLog"></div>
    </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;
}

#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 */
}
#top {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
}
#targetContainer {
    -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 */
}
#bottom {
    -ms-grid-row: 3;
    -ms-grid-column: 1;
    -ms-grid-column-align: center;
}
#eventLog {
    -ms-grid-row: 1;
    -ms-grid-column: 2; 
    -ms-grid-row-span: 3;
    padding: 10px;
    background-color: black;
    color: white;
}
#target {
    width: 640px;
    height: 320px;
    border: none;
    padding: 0px;
    margin: 0px;
    -ms-transform-origin: 0% 0%;
    touch-action: none; /* Disable panning and zooming */
}


Escuchar eventos de puntero

En la mayoría de los casos, te recomendamos obtener información del puntero mediante el argumento de evento de los controladores de eventos de puntero del marco de lenguaje de Windows 8 que hayas elegido (aplicaciones de la Tienda Windows con JavaScript, aplicaciones de la Tienda Windows con C++ C# o Visual Basic, o aplicaciones de la Tienda Windows con DirectX con C++).

Si el argumento de evento no expone los detalles de puntero que necesita tu aplicación, puedes acceder a los datos extendidos de puntero del argumento de evento con los métodos getCurrentPoint y getIntermediatePoints, o las propiedades currentPoint y intermediatePoints. Te recomendamos usar los métodos getCurrentPoint y getIntermediatePoints, que permiten especificar el contexto de los datos de puntero.

La siguiente captura de pantalla muestra el área de destino con detalles del puntero del mouse de este ejemplo.

Captura de pantalla del área de destino del puntero.

Aquí establecemos la ubicación de la pantalla y las escuchas de eventos del área de destino.

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


    var
    // 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). 
    numActiveContacts = 0,

    // The input target.
    target,

    // Target background colors corresponding to various pointer states.
    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).
    eventLog;

    function initialize() {
        // Configure the target.
        eventLog = document.getElementById("eventLog");
        target = document.getElementById("target");
        setTarget();
    }


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


    function setTarget() {
        //  Set up the target position and size.
        target.style.backgroundColor = pointerColor.out;

        // Expando dictionary property to track active contacts. An entry is added 
        // during pointerdown/pointerhover/pointerover events and removed 
        // during pointerup/lostpointercapture/pointercancel/pointerout 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);
    }


Finalmente, establecemos el área de detalles del puntero.


// Create DIV and insert it into the document hierarchy to display pointer details.
function createInfoPop(e) {
    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) {
    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);
}


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 pointerdown y pointerup 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 pointerup, pointerout, pointercancel y lostpointercapture).

    
        // 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). 
        function onPointerDown(e) {
            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 (parseInt(i) === e.pointerId) {
                    return;
                }
            }
    
            // Push new pointer Id onto expando target pointers array.
            target.pointers[e.pointerId] = 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);
        }
    
    
    
  • Este controlador administra un evento de entrada de puntero (arriba) para un puntero que está en contacto y se mueve dentro de los límites del destino. Agregamos el evento al registro de eventos, agregamos el puntero a la matriz de punteros y mostramos los detalles del puntero.

    Consulta el evento pointermove para controlar el estado mantener de un puntero que no está en contacto pero sí dentro de los límites del destino (normalmente un dispositivo de lápiz o pluma).

    
    function onPointerOver(e) {
        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 (parseInt(i) === e.pointerId) {
                return;
            }
        }
    
        // Push new pointer Id onto expando target pointers array.
        target.pointers[e.pointerId] = 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);
    }
    
    
    
  • Este controlador administra un evento de movimiento de puntero. Agregamos el evento al registro de eventos y actualizados los detalles del puntero (para mantener, también agregamos el puntero a la matriz de punteros).

    MSPointerHover ya no se utiliza en Windows 8.1. Usa pointermove y la propiedad de puntero IsInContact para determinar el estado mantener.

    Nota   En este controlador, también se procesan varios clics simultáneos de botones del mouse. La entrada de mouse se asocia con un solo puntero asignado al detectar por primera vez la entrada de mouse. Al hacer clic en otros botones del mouse (secundario, rueda o primario) durante la interacción, se crean asociaciones secundarias entre el puntero y esos botones mediante el evento PointerPressed. El evento PointerReleased solo se activa cuando se suelta el último botón del mouse asociado con la interacción (no necesariamente el botón inicial) . Debido a esta asociación exclusiva, los clics de otros botones del mouse se enrutan mediante el evento PointerMove.

    
        function onPointerMove(e) {
            e.cancelBubble = true;
    
            // 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.  
            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 (parseInt(i) === e.pointerId) {
                            updateInfoPop(e);
                            return;
                        }
                    }
    
                    // Push new pointer Id onto expando target pointers array.
                    target.pointers[e.pointerId] = 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);
        }
    
    
    
  • Este controlador administra un evento MouseWheel (rotación). Agregamos el evento al registro de eventos, agregamos el puntero a la matriz de punteros (si es necesario) y mostramos los detalles del puntero.

    
    function onMouseWheel(e) {
        // Check if a mouse pointer already exists.
        for (var i in target.pointers) {
            // Ensure existing pointer type is e.MSPOINTER_TYPE_MOUSE (4). 
            if (target.pointers[i][1] === 4) {
                e.pointerId = target.pointers[i][0];
                break;
            }
        }
        eventLog.innerText += "\nMouse wheel: " + e.pointerId;
        // For this example, we fire a corresponding pointer down event.
        onPointerDown(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 onPointerUp(e) {
            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 (parseInt(i) === 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;
            }
        }
    
    
    
  • 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.
        // Note: Pointer capture is maintained until pointer up event.
        function onPointerOut(e) {
            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 (parseInt(i) === 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;
                    }
                }
            }
        }
    
    
    
  • 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 onPointerCancel(e) {
            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 (parseInt(i) === e.pointerId) {
                    target.pointers.splice(i, 1);
                    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  lostpointercapture puede producirse en lugar de pointerup. 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
        // lostpointercapture can fire instead of pointerup. 
        function onLostPointerCapture(e) {
            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(app);
    
            // 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 (parseInt(i) === 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;
            }
        }
    
    
    

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 mediante el objeto de evento de puntero. Como se indicó anteriormente, se puede obtener información de puntero adicional mediante los métodos getCurrentPoint y getIntermediatePoints o las propiedades currentPoint y intermediatePoints del argumento de evento. Te recomendamos usar los métodos getCurrentPoint y getIntermediatePoints, que permiten especificar el contexto de los datos de puntero.

Aquí, consultamos varias propiedades de puntero directamente desde el objeto de evento y las propiedades extendidas disponibles únicamente mediante los objetos PointerPoint y PointerPointProperties.


// Get extended pointer data.
function queryPointer(e) {
    // 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.tiltX;
                details += "\nTilt Y: " + ptTargetProperties.tiltY;
                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.tiltX;
            details += "\nTilt Y: " + ptTargetProperties.tiltY;
            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;
}


Consulta Temas relacionados en la parte inferior de esta página para obtener vínculos a muestras más complejas.

Ejemplo completo

Consulta Código completo de punteros.

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

Conceptos
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
Desarrollar aplicaciones de la Tienda Windows (JavaScript y HTML)
Diseño de la interacción táctil
Referencia
Windows.Devices.Input
Windows.UI.Core
Windows.UI.Input
Muestras (DOM)
Muestra de desplazamiento, movimiento panorámico y zoom HTML
Entrada: muestra de control de eventos de puntero de DOM
Entrada: muestra de gestos instanciables
Muestras (API de aplicaciones de la Tienda Windows)
Entrada: muestra de entrada de lápiz
Entrada: muestra de manipulaciones y gestos (JavaScript)
Entrada: muestra de entrada de lápiz simplificada
Entrada: muestra de gestos de Windows 8
Entrada: muestra de eventos de entrada de usuario de XAML
Muestra de desplazamiento, movimiento panorámico y zoom XAML
Muestras (DirectX)
Muestra de entrada táctil de DirectX
Entrada: muestra de manipulaciones y gestos (C++)
Entrada: muestra de prueba de acceso táctil

 

 

Mostrar:
© 2014 Microsoft. Reservados todos los derechos.