Web API Pointer Events

Web API Pointer events are DOM events that are designed to create a single DOM event model to handle pointing input devices such as a pen, mouse, or touch screen. These are fired as a pointing device. It helps different devices work together smoothly, making sure your experience on websites is always smooth and responsive.

We will explore the above-mentioned topics with the help of suitable examples.

Pointer Events Guides

Terminologies	Descriptions
Using Pointer Events	Using pointer-events and HTML ‘<canvas>‘, create a multi-touch drawing app that accepts input from various devices (mouse, pen, fingertip) with the same code. Note: Requires a browser supporting pointer events.
multi-touch Interaction	Web API pointers enable multi-touch interaction, supporting pens, touch screens, and mice. It allows simultaneous input from multiple pointers, enhancing user experience with additional complexity in interaction handling.
Pinch zoom interaction	Enhance the user experience by implementing pinch/zoom gestures in your application. Using pointer events, detect when two pointers move closer or farther apart, enabling intuitive multi-touch interactions.

Pointer Events Terms

The following terms can used with Pointer Events, which are described below:

Events	Descriptions
Active Buttons State	This term denotes the state when a pointer records a non-zero value for the button’s property.
Active Pointer	Any input device capable of generating events falls under the category of an active pointer. A pointer remains active if it can produce additional events, such as a pen in a down state that can generate events upon being lifted or moved.
Digitizer	A digitizer is a sensing device with a surface capable of detecting contact.
Hit Test	The hit test is the browser’s process to determine the target element for a given pointer event, considering the pointer’s location and the visual layout of elements within a document on the screen.
Pointer	A pointer is a hardware-agnostic representation of input devices, capable of targeting specific coordinates on a screen. Examples include mice, pens/styluses, and touch contacts.

PointerEvent Interface

It represents a pointer event, including properties like pointerId, pointerType, and isPrimary.

Pointer Events Properties

Navigator.maxTouchPoints

It is a property that informs web developers about the maximum number of simultaneous touch points supported on a user’s device. This data helps us to optimize touch-based interactions in their applications, ensuring a seamless and responsive user experience.

Pointer Events Methods

Methods	Description
setPointerCapture( )	It is a function that captures a pointer, directing subsequent events to a specified element.
releasePointerCapture( )	It frees a captured pointer, allowing it to interact with other elements. These methods offer control over pointer interactions, enhancing the flexibility of web applications.

Pointer Events

Events in the Web API Pointer Events are notifications triggered by pointer-related interactions, such as clicks, taps, and movement.

Web API Events	Description
pointerdown	It is fired when a pointer becomes active.
pointerup	Fired when a pointer ceases to be active.
pointermove	Fired when a pointer is moved or when it changes its coordinates.
pointercancel	Fired when the input is disrupted.
pointerover	Fired when a pointer is moved into an element’s hit test boundaries. This event is triggered when the pointer enters the area of an element.
pointerenter	Fired when a pointer is moved into the hit test boundaries of an element or one of its descendants. This includes cases where a pointerdown event occurs from a device that does not support hover.
pointerout	Fired when a pointer is moved out of the hit test boundaries of an element. It can also be triggered after firing the pointerup event for a device that does not support hover or after firing the pointercancel event.
pointerleave	Fired when a pointer is moved out of the hit test boundaries of an element. For pen devices, this event is fired when the stylus leaves the hover range detectable by the digitizer.
gotpointercapture	Fired when an element receives pointer capture. This event is useful for indicating that a specific element has successfully captured a pointer.
lostpointercapture	Fired after pointer capture is released for a pointer. This event occurs when an element that previously captured a pointer releases its capture.

Example 1: In this example, we will see how to implement the above approach in JavaScript.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,
                   initial-scale=1.0">
    <title>Web API Pointer Events</title>
</head>

<body>
    <h1>GeeksforGeeks</h1>
</body>
<script src="script.js"></script>

</html>

Javascript

// script.js
document.addEventListener('pointerdown', (event) => {
    console.log(`Pointer down at (${event.clientX}, ${event.clientY})`);
});

document.addEventListener('pointerup', (event) => {
    console.log(`Pointer up at (${event.clientX}, ${event.clientY})`);
});

document.addEventListener('pointermove', (event) => {
    console.log(`Pointer moved to (${event.clientX}, ${event.clientY})`);
});

Output:

Example 2: The following example demonstrates how to handle pointer events and capture/release pointers on a specific element.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,
                   initial-scale=1.0">
    <title>Web API Pointer Events Example</title>
    <style>
        #target {
            width: 200px;
            height: 200px;
            background-color: lightblue;
            margin: 50px;
            text-align: center;
            line-height: 200px;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div id="target">Click and Drag</div>

    <script>
        document.
            addEventListener('DOMContentLoaded', () => {
                const targetElement =
                    document.getElementById('target');

                targetElement.
                    addEventListener('pointerdown', (event) => {

                        // Capture the pointer for this element
                        targetElement.
                            setPointerCapture(event.pointerId);

                        // Change the background color on pointer down
                        targetElement.
                            style.backgroundColor = 'lightcoral';

                        console.log(`Pointer captured for element`);
                    });

                targetElement.addEventListener('pointerup', (event) => {

                    // Release the captured pointer
                    targetElement.
                        releasePointerCapture(event.pointerId);

                    // Change the background color back on pointer up
                    targetElement.
                        style.backgroundColor = 'lightblue';

                    console.log(`Pointer released from element`);
                });

                targetElement.addEventListener('pointermove', (event) => {

                    // Move the element with the pointer
                    targetElement.style.left =
                        (event.clientX - 100) + 'px';
                    targetElement.style.top =
                        (event.clientY - 100) + 'px';
                });
            });
    </script>
</body>

</html>

Output:

Browser Support

• Google Chrome 55
• Edge 12
• Firefox 59
• Apple Safari 42
• Opera 13