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 Property | Description |
---|---|
pointerId | Unique identifier for the pointer causing the event |
pointerType | indicates pointing device type ( mouse,pen,touch) |
isPrimary | indicates true for primary pointer ( used in multi-touch) |
width | indicates the width area where pointer touches the device |
height | indicates the height area where pointer touches the device |
tangentialPressure | indicates normalized tangential pressure |
tiltX, tiltY, twist | indicates pen-specific properties |
What are the Pointer Event types ?
The below given are the pointer event types supported by all browsers
Point Event Type | Description |
---|---|
pointerdown | indicates when the pointing device is down |
pointerup | indicates 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 |
pointerenter | indicates when the pointing device is entered |
pointerleave | indicates when the pointing device is left |
pointercancel | indicates when the pointing device is cancelled |
gotpointercapture | indicates when the pointing device is Captured |
lostpointercapture | indicates 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
- User First Finger Touch: The Pointer Event captures the isPrimary =true and pointerId
- 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 */ } }