Much of today's web content assumes the user's pointing device will be a mouse. However, since many devices support other types of pointing input devices, such as pen/stylus and touch surfaces, extensions to the existing pointing device event models are needed. address that need. Pointer events Pointer events are DOM events that are fired for a pointing device. They are designed to create a single DOM event model to handle pointing input devices such as a mouse, pen/stylus or touch (such as one or more fingers). The is a hardware-agnostic device that can target a specific set of screen coordinates. Having a single event model for pointers can simplify creating Web sites and applications and provide a good user experience regardless of the user's hardware. However, for scenarios when device-specific handling is desired, pointer events defines a to inspect the device type which produced the event. pointer pointerType property The events needed to handle generic pointer input are analogous to ( / , / , etc.). mouse events mousedown pointerdown mousemove pointermove Consequently, pointer event types are intentionally similar to mouse event types. Additionally, a pointer event contains the usual properties present in mouse events (client coordinates, target element, button states, etc.) in addition to new properties for other forms of input: pressure, contact geometry, tilt, etc. In fact, the interface inherits all of the properties, thus facilitating the migration of content from mouse events to pointer events. PointerEvent MouseEvent Terminology 1. active buttons state The condition when a has a non-zero value for the property. For example, in the case of a pen, when the pen has physical contact with the digitizer, or at least one button is depressed while hovering. pointer buttons 2. active pointer Any input device that can produce events. A pointer is considered active if it can still produce further events. For example, a pen that is a down state is considered active because it can produce additional events when the pen is lifted or moved. pointer 3. digitizer A sensing device with a surface that can detect contact. Most commonly, the sensing device is a touch-enabled screen that can sense input from an input device such as a pen, stylus, or finger. Some sensing devices can detect the close proximity of the input device, and the state is expressed as a hover following the mouse. 4. hit test The process the browser uses to determine a target element for a pointer event. Typically, this is determined by considering the pointer's location and also the visual layout of elements in a document on screen media. 5. pointer A hardware-agnostic representation of input devices that can target a specific coordinate (or set of coordinates) on a screen. Examples of input devices are mouse, pen/stylus, and touch contacts. pointer 6. pointer capture Pointer capture allows the events for a pointer to be retargeted to a particular element other than the normal hit test result of the pointer's location. 7. pointer event A DOM fired for a . event pointer Interfaces The primary interface is the interface which has a plus several event types and associated global event handlers. PointerEvent constructor The standard also includes some extensions to the and interfaces. Element Navigator The following sub-sections contain short descriptions of each interface and property. The interface extends the interface and has the following properties. (All of the following properties are Read only .) PointerEvent interface PointerEvent MouseEvent pointerId A unique identifier for the pointer causing the event. width The width (magnitude on the X axis), in CSS pixels, of the contact geometry of the pointer. height the height (magnitude on the Y axis), in CSS pixels, of the contact geometry of the pointer. pressure the normalized pressure of the pointer input in the range of to , where and represent the minimum and maximum pressure the hardware is capable of detecting, respectively. 0 1 0 1 tangentialPressure The normalized tangential pressure of the pointer input (also known as barrel pressure or cylinder stress) in the range 1 to , where is the neutral position of the control. - 1 0 tiltX The plane angle (in degrees, in the range of to ) between the Y–Z plane and the plane containing both the pointer (e.g. pen stylus) axis and the Y axis. -90 90 tiltY the plane angle (in degrees, in the range of to ) between the X–Z plane and the plane containing both the pointer (e.g. pen stylus) axis and the X axis. -90 90 twist The clockwise rotation of the pointer (e.g. pen stylus) around its major axis in degrees, with a value in the range to . 0 359 pointerType Indicates the device type that caused the event (mouse, pen, touch, etc.) isPrimary Indicates if the pointer represents the primary pointer of this pointer type. Event types and Global Event Handlers Pointer events have ten event types, seven of which have similar semantics to their mouse event counterparts ( , , , , , , and ). down up move over out enter leave Below is a short description of each event type and its associated . Global Event Handler 1. , : Event: pointerover Event Handler onpointerover () Fired when a pointer is moved into an element's boundaries. hit test 2. , Event: pointerenter Event Handler: onpointerenter() Fired when a pointer is moved into the boundaries of an element or one of its descendants, including as a result of a pointerdown event from a device that does not support hover (see ). hit test pointerdown 3. , Event: pointerdown Event Handler: onpointerdown () Fired when a pointer becomes . 4. , active buttons state Event: pointermove Event Handler: onpointermove () Fired when a pointer changes coordinates. This event is also used if the change in pointer state can not be reported by other events. 5. , Event: pointerup Event Handler: onpointerup () Fired when a pointer is no longer . 6. , active buttons state Event: pointercancel Event Handler: onpointercancel () A browser fires this event if it concludes the pointer will no longer be able to generate events (for example the related device is deactived). 7. , Event: pointerout Event Handler: onpointerout () Fired for several reasons including: pointer is moved out of the boundaries of an element; firing the pointerup event for a device that does not support hover (see pointerup); after firing the pointercancel event (see pointercancel); when a pen stylus leaves the hover range detectable by the digitizer. 8. , hit test Event: pointerleave Event Handler: onpointerleave () Fired when a pointer is moved out of the boundaries of an element. For pen devices, this event is fired when the stylus leaves the hover range detectable by the digitizer. 9. , Fired when an element receives pointer capture. hit test Event: gotpointercapture Event Handler: ongotpointercapture () 10. , Event: lostpointercapture Event Handler: onlostpointercapture () Fired after pointer capture is released for a pointer. Element extensions There are three extensions to the interface: Element setPointerCapture() Designates a specific element as the of future pointer events. capture target releasePointerCapture() This method releases (stops) that was previously set for a specific pointer event. pointer capture Navigator extension The property is used to determine the maximum number of simultaneous touch points that are supported at any single point in time. Navigator.maxTouchPoints Examples This section contains examples of basic usage of using the pointer events interfaces. Registering event handlers This example registers a handler for every event type for the given element. <html> <body onload= > < html> < > script { } { } { } { } { } { } { } { } { } { } { el= .getElementById( ); el.onpointerover = over_handler;
      el.onpointerenter = enter_handler;
      el.onpointerdown = down_handler;
      el.onpointermove = move_handler;
      el.onpointerup = up_handler;
      el.onpointercancel = cancel_handler;
      el.onpointerout = out_handler;
      el.onpointerleave = leave_handler;
      el.gotpointercapture = gotcapture_handler;
      el.lostpointercapture = lostcapture_handler;
    } ( ) function over_handler event ( ) function enter_handler event ( ) function down_handler event ( ) function move_handler event ( ) function up_handler event ( ) function cancel_handler event ( ) function out_handler event ( ) function leave_handler event ( ) function gotcapture_handler event ( ) function lostcapture_handler event ( ) function init var document "target" // Register pointer event handlers </ > script "init();" Touch me ... < = > div id "target" </ > div /body>
</ This example illustrates accessing all of a touch event's properties. Event properties <html> <body onload= > < html> < > script id = ; { } { } { } { } { } { } { } { area = ev.width * ev.height; (id == ev.identifier) process_id(ev); (ev.pointerType) { : 
          process_mouse(ev); ; : 
          process_pen(ev); ; : 
          process_touch(ev); ; : .log( + ev.pointerType + );
      } (ev.tiltX != && ev.tiltY != ) process_tilt(ev.tiltX, ev.tiltY); process_pressure(ev.pressure); (!ev.isPrimary) process_non_primary(ev);
    } { el= .getElementById( ); el.onpointerdown = down_handler;
    } var -1 ( ) function process_id event // Process this event based on the event's identifier ( ) function process_mouse event // Process the mouse pointer event ( ) function process_pen event // Process the pen pointer event ( ) function process_touch event // Process the touch pointer event ( ) function process_tilt tiltX, tiltY // Tilt data handler ( ) function process_pressure pressure // Pressure handler ( ) function process_non_primary event // Non primary handler ( ) function down_handler ev // Calculate the touch point's contact area var // Compare cached id with this event's id and process accordingly if // Call the appropriate pointer type handler switch case "mouse" break case "pen" break case "touch" break default console "pointerType " " is Not suported" // Call the tilt handler if 0 0 // Call the pressure handler // If this event is not primary, call the non primary handler if ( ) function init var document "target" // Register pointerdown handler </ > script "init();" Touch me ... < = > div id "target" </ > div /body>
</ Determining the Primary Pointer In some scenarios there may be multiple pointers (for example a device with both a touchscreen and a mouse) or a pointer supports multiple contact points (for example a touchscreen that supports multiple finger touches). The application can use the property to identify a master pointer among the set of for each pointer type. If an application only wants to support a primary pointer, it can ignore all pointer events that are not primary. isPrimary active pointers For mouse there is only one pointer, so it will always be the primary pointer. For touch input, a pointer is considered primary if the user touched the screen when there were no other active touches. For pen and stylus input, a pointer is considered primary if the user's pen initially contacted the screen when there were no other active pens contacting the screen. Determining button states Some pointer devices, such as mouse and pen, support multiple buttons and the button presses can be i.e. depressing an additional button while another button on the pointer device is already depressed. chorded To determine the state of button presses, pointer events uses the and properties of the interface (that inherits from). button buttons MouseEvent PointerEvent The following table provides the values of and for the various device button states. button buttons The button property indicates a change in the state of the button. However, as in the case of touch, when multiple events occur with one event, all of them have the same value. Notice: Pointer capture Pointer capture allows events for a particular to be re-targeted to a particular element instead of the normal at a pointer's location. This can be used to ensure that an element continues to receive pointer events even if the pointer device's contact moves off the element (for example by scrolling). pointer event hit test The following example shows pointer capture being set on an element. <html> <body onload= > < html> < > script { el = .getElementById( ); el.setPointerCapture(ev.pointerId);
  } { el = .getElementById( );
    el.onpointerdown = downHandler;
  } ( ) function downHandler ev let document "target" // Element 'target' will receive/capture further events ( ) function init let document "target" </ > script "init();" Touch me ... < = > div id "target" </ > div /body>
</ The following example shows a pointer capture being released (when a event occurs. The browser does this automatically when a or event occurs. pointercancel pointerup pointercancel <html> <body onload= > < html> < > script { el = .getElementById( ); el.setPointerCapture(ev.pointerId);
    } { el = .getElementById( ); el.releasePointerCapture(ev.pointerId);
    } { el = .getElementById( ); el.onpointerdown = downHandler;
      el.onpointercancel = cancelHandler;
    } ( ) function downHandler ev let document "target" // Element "target" will receive/capture further events ( ) function cancelHandler ev let document "target" // Release the pointer capture ( ) function init let document "target" // Register pointerdown and pointercancel handlers </ > script "init();" Touch me ... < = > div id "target" </ > div /body>
</ touch-action CSS property The CSS property is used to specify whether or not the browser should apply its default ( ) touch behavior (such as zooming or panning) to a region. This property may be applied to all elements except: non-replaced inline elements, table rows, row groups, table columns, and column groups. touch-action native A value of means the browser is free to apply its default touch behavior (to the specified region) and the value of disables the browser's default touch behavior for the region. The values and , mean that touches that begin on the specified region are only for horizontal and vertical scrolling, respectively. The value means the browser may consider touches that begin on the element are only for scrolling and zooming. auto none pan-x pan-y manipulation In the following example, the browser's default touch behavior is disabled for the element. div <html> <div style="touch-action:none;">Can't touch this ... </div> < < > body </ > body /html> In the following example, default touch behavior is disabled for some button elements. button#tiny {
  touch-action: none;
} In the following example, when the element is touched, it will only pan in the horizontal direction. target #target {
  touch-action: pan-x;
} Compatibility with mouse events Although the pointer event interfaces enable applications to create enhanced user experiences on pointer enabled devices, the reality is the vast majority of today's web content is designed to only work with mouse input. Consequently, even if a browser supports pointer events, the browser must still process mouse events so content that assumes mouse-only input will work as is without direct modification. Ideally, a pointer enabled application does not need to explicitly handle mouse input. However, because the browser must process mouse events, there may be some compatibility issues that need to be handled. This section contains information about pointer event and mouse event interaction and the ramifications for application developers. The browser . This mapping of events is called . Authors can prevent the production of certain compatibility mouse events by canceling the pointerdown event but note that: may map generic pointer input to mouse events for compatibility with mouse-based content compatibility mouse events Mouse events can only be prevented when the pointer is down. Hovering pointers (e.g. a mouse with no buttons pressed) cannot have their mouse events prevented. The , , , and events are never prevented (even if the pointer is down). mouseover mouseout mouseenter mouseleave Best practices Here are some to consider when using pointer events: best practices Minimize the amount of work performed in event handlers. Add the event handlers to a specific target element (rather than the entire document or nodes higher up in the document tree). The target element (node) should be large enough to accommodate the largest contact surface area (typically a finger touch). If the target area is too small, touching it could result in firing other events for adjacent elements. Implementation and deployment status The indicates pointer event support among desktop and mobile browsers is available almost everywhere except in Safari. pointer events browser compatibility data Some new value have been proposed for the property as part of specification but currently those new values have no implementation support. css touch-action Pointer Events Level 2 Demos and examples Touch/pointer tests and demos (by Patrick H. Lauke) Community Pointer Events Working Group Mail list W3C #pointerevents IRC channel Related topics and resources Touch Events Standard Credits Source: https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events Published under licence Open CC Attribution ShareAlike 3.0

Mozilla

Target

Pointer Lock API: How to Control Mouse Cursor

Web API: Permissions API Documentation

Read My Stories

Too Long; Didn't Read

Make resilience your competitive advantage

Pointer Events

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

An Introduction to Firefox’s new Site Isolation Security Architecture

10 VSCode Extensions To Make Your Life Easier

10 Ways Stand Out as a Java Developer and Land that Dream Job

10 Tips For Junior Developers To Succeed in Code

10 Things Every Beginner Should Know When Learning Javascript And React

An Introduction to Firefox’s new Site Isolation Security Architecture

10 VSCode Extensions To Make Your Life Easier

10 Ways Stand Out as a Java Developer and Land that Dream Job

10 Tips For Junior Developers To Succeed in Code

10 Things Every Beginner Should Know When Learning Javascript And React

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps