pointer events in JavaScript

26 Jun 2021 oracleappsadmin

The blog provides the details on the usage of pointer events in JavaScript. The pointer events are useful for capturing the events related to pointing devices, such as a mouse, a pen/stylus, a touchscreen, etc.

All the popular browsers are supported with Pointer Event Level 2 Specification

What are Point Event Properties ?

The below given are the pointer event properties supported by all browsers

Point Event PropertyDescription
 pointerIdUnique identifier for the pointer causing the event 
 pointerTypeindicates pointing device type ( mouse,pen,touch) 
 isPrimaryindicates true for primary pointer ( used in multi-touch)  
 widthindicates the width area where pointer touches the device 
 height indicates the height area where pointer touches the device 
tangentialPressureindicates normalized tangential pressure
 tiltX, tiltY, twistindicates pen-specific properties 
What are the Pointer Event types ?

The below given are the pointer event types supported by all browsers

Point Event TypeDescription
 pointerdownindicates when the pointing device is down 
 pointerupindicates when the pointing device is up
 pointermove indicates when the pointing device is moved
 pointerover indicates when the pointing device over
 pointerout indicates when the pointing device is out
pointerenterindicates when the pointing device is entered
 pointerleave indicates when the pointing device is left
pointercancelindicates when the pointing device is cancelled
gotpointercaptureindicates when the pointing device is Captured
lostpointercaptureindicates when the pointing device lost the Capture
Multi-touch support in pointer event

Pointer event is useful where the user can perform multi-touch like mobile devices, touch screen monitors, etc

The below steps are performed when multiple fingers are touched

  1. User First Finger Touch: The Pointer Event captures the isPrimary =true and pointerId
  2. User Second Finger Touch : The Pointer Event captures the isPrimary =false and pointerId
pointercancel event

The pointercancel event is triggered when the ongoing pointer interaction is aborted due to some reason so that no more pointer events can be trigerred.

  • The pointer device hardware was disabled
  • change in device orientation ( tablet / mobile rotation)
  • in case browser does not consider it as a pointer event
pointer event example in JavaScript
window.addEventListener("pointerdown", detectInputType);
function detectInputType(event) {
    switch(event.pointerType) {
        case "mouse":
            /* mouse input detected */
            break;
        case "pen":
            /* pen/stylus input detected */
            break;
        case "touch":
            /* touch input detected */
            break;
        default:
            /* pointerType is empty (could not be detected)
            or UA-specific custom type */
    }
}