CSS - Pointer Events

Ethan D. - May 31, 2024

Pointer Event Types

CSS has pointer event types that let you handle different stages and interactions of a pointing device, such as a mouse or touchscreen. Here are the main pointer event types:

Event Type	Description
`pointerdown`	Fired when a pointing device (e.g., mouse, pen, or touch) makes contact with the surface or the element. Similar to the `mousedown` event for mouse devices. Triggered when a button is pressed or a touch point is detected.
`pointerup`	Occurs when the pointing device is lifted or released from the surface or the element. Corresponds to the `mouseup` event for mouse devices. Fired when a button is released or a touch point is removed.
`pointercancel`	Triggered when a pointer event is canceled or interrupted. Can happen due to reasons like the pointer leaving the document window, the device entering a low-power state, or the browser canceling the event.
`pointermove`	Fired when the pointing device is moved across the surface or the element. Tracks the movement of the pointer and gives the current coordinates of the pointer. Similar to the `mousemove` event for mouse devices.
`pointerover`	Occurs when the pointing device enters the hit test boundaries of an element or one of its descendants. Fired before the `pointerenter` event and can be used to detect when the pointer starts hovering over an element.
`pointerout`	Triggered when the pointing device leaves the hit test boundaries of an element or one of its descendants. Fired after the `pointerleave` event and can be used to detect when the pointer stops hovering over an element.
`pointerenter`	Fired when the pointing device enters the hit test boundaries of an element. Similar to the `mouseenter` event for mouse devices. Unlike `pointerover`, `pointerenter` does not bubble and is not canceled by descendants.
`pointerleave`	Occurs when the pointing device leaves the hit test boundaries of an element. Similar to the `mouseleave` event for mouse devices. Unlike `pointerout`, `pointerleave` does not bubble and is not canceled by descendants.
`gotpointercapture`	Triggered when an element captures the pointer using the `setPointerCapture()` method. Pointer capture lets an element exclusively receive pointer events, even if the pointer moves outside its boundaries.
`lostpointercapture`	Fired when an element loses the pointer capture that was previously set using `setPointerCapture()`. Can happen when the `releasePointerCapture()` method is called or when the pointer is canceled.

These pointer event types give you options to handle different stages and interactions of pointing devices in CSS. By using these events, you can make interactive and responsive designs that react to user input from various pointing devices.

Pointer Event Properties

Pointer events in CSS have properties that give you details about the pointer and its interaction with the element.

Property	Description
`pointerId`	A unique identifier for the pointer causing the event. It stays the same for the same pointer device during the lifetime of the page, even if the pointer type changes. The `pointerId` is useful for tracking specific pointers and handling multi-touch interactions.
`pointerType`	Tells you the type of pointing device that caused the event. The possible values are `"mouse"`, `"pen"`, or `"touch"`. This property helps you determine the input method and adapt your styles or behaviors accordingly.
`isPrimary`	A boolean value that shows if the pointer is the main or primary pointer of its type. For example, in a multi-touch scenario, the first finger to touch the screen is considered the primary pointer. The `isPrimary` property is useful for handling primary actions or gestures.
`width` and `height`	These properties give you the width and height of the pointer's contact area, measured in CSS pixels. For touch pointers, they represent the size of the touch point. For mouse or pen pointers, they may reflect the size of the cursor or pen tip. The `width` and `height` properties help you estimate the precision or scale of the pointer input.
`pressure`	A number between 0 and 1 that indicates the pressure applied by the pointer. A value of 0 means no pressure, while 1 means the maximum pressure. The exact meaning of pressure depends on the device and its capabilities. For example, it can relate to the force of a touch or the pressure of a pen on a tablet.
`tangentialPressure`	Similar to `pressure`, but it measures the pressure applied to a stylus or pen in the direction perpendicular to the surface. The `tangentialPressure` property is useful for capturing side pressure or barrel rotation of a pen.
`tiltX` and `tiltY`	These properties tell you the tilt of a pen or stylus pointer, measured in degrees. `tiltX` gives the angle between the pointer and the surface's X-axis, while `tiltY` gives the angle between the pointer and the surface's Y-axis. Positive values mean a tilt to the right or towards the user. The `tiltX` and `tiltY` properties are helpful for creating tilt-based effects or simulating natural drawing behaviors.
`twist`	Represents the clockwise rotation of a pen pointer, measured in degrees between 0 and 359. The `twist` property lets you detect and respond to the rotation of a pen, enabling advanced drawing or input techniques.
`altitudeAngle` and `azimuthAngle`	These properties provide the altitude and azimuth angles of a pen pointer in relation to the surface, measured in degrees. The `altitudeAngle` is the angle between the pointer and the Z-axis (90 degrees is perpendicular to the surface). The `azimuthAngle` is the angle between the pointer and the X-axis in the X-Y plane (0 degrees is pointing along the X-axis). These properties give you a full 3D orientation of the pen pointer.

By using these pointer event properties, you can get a set of information about the pointer and its interaction with the element. You can use this data to create more natural and responsive user experiences, adapt your styles based on the pointer type, handle multi-touch gestures, or simulate realistic drawing tools. The pointer event properties open up possibilities for creative and interactive CSS designs.

Using Pointer Events in CSS

You can use pointer events on elements with CSS and mix them with other properties to create interactive designs. Here's how you can use pointer events in CSS:

Using pointer events on elements:

Use the pointer-events property to set how an element reacts to pointer events.
The pointer-events property can have values like auto, none, all, fill, stroke, visible, or painted.
Setting pointer-events: none makes an element ignore all pointer events and become unclickable.
Using pointer-events: all lets an element get pointer events even if it's not the target element.

Mixing pointer events with other CSS properties:

You can use pointer events with other CSS properties to create interactive effects.
For example, you can change the cursor property based on the pointerover and pointerout events to give visual feedback when hovering over an element.
Mix pointer events with properties like transform, opacity, or filter to make elements react to pointer interactions.
Use the pointerdown and pointerup events to start animations or transitions when a pointer button is pressed and released.

Examples of pointer event usage in CSS:

Example: Highlight an element when hovering over it

.button {
  background-color: blue;
  color: white;
}
.button:pointerover {
  background-color: lightblue;
}

Example: Make an element draggable using pointer events

.draggable {
  pointer-events: all;
  touch-action: none;
  user-select: none;
}
.draggable:pointerdown {
  cursor: move;
}

Example: Create a ripple effect on pointer down

.ripple {
  position: relative;
  overflow: hidden;
}
.ripple:pointerdown {
  transform: scale(0.9);
}
.ripple:after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background-color: rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.ripple:pointerdown:after {
  width: 200%;
  height: 200%;
  transition: width 0.4s ease-out, height 0.4s ease-out;
}

These are just a few examples of how you can use pointer events in CSS to create interactive designs. By mixing pointer events with other CSS properties and selectors, you can make elements react to pointer interactions in interesting and fun ways. Try different event types and properties to see what creative effects you can make!

Pointer Event Polyfills

Polyfills are scripts that add support for newer features to older browsers that don't have those features built-in. They help you use new web technologies and APIs in browsers that haven't caught up yet. Pointer events are a fairly new addition to the web, so not all browsers support them natively. That's where pointer event polyfills come in.

Popular pointer event polyfills:

Polyfill	Description
PEP (Pointer Events Polyfill)	PEP is a popular and lightweight polyfill for pointer events. It adds support for pointer events to browsers that don't have them, using mouse and touch events as fallbacks. PEP follows the W3C Pointer Events specification closely and provides a consistent API across different browsers.
HandJS	HandJS is another polyfill that brings pointer events to older browsers. It's designed to be fast and easy to use. HandJS maps mouse and touch events to their corresponding pointer events, so you can use the same code for both modern and older browsers.
Polymer	Polymer is a library for building web components and progressive web apps. It includes a pointer events polyfill as part of its core libraries. If you're already using Polymer in your project, you can take advantage of its built-in pointer events support.

To include a pointer event polyfill in your project:

Choose a polyfill that fits your needs, like PEP or HandJS.
Download the polyfill script from the polyfill's website or a content delivery network (CDN).
Add the polyfill script to your HTML file, usually in the <head> section, before any other scripts that use pointer events.
Make sure the polyfill script is loaded and executed before your own scripts that rely on pointer events.

Example: Including the PEP polyfill from a CDN

<head>
  ...
  <script src="https://code.jquery.com/pep/0.4.3/pep.js"></script>
  ...
</head>

With a pointer event polyfill in place, you can use pointer events in your CSS and JavaScript code, and the polyfill will take care of translating those events to mouse and touch events in browsers that don't support pointer events natively. This way, you can create interactive experiences that work across a wide range of devices and browsers.

Keep in mind that polyfills are not a perfect solution and may have some limitations or performance overhead compared to native support. As browser support for pointer events improves, you may be able to remove the polyfill from your project in the future. But for now, polyfills are a helpful tool for using pointer events in your web projects.