Table of contents
1.
Introduction
2.
Pointer event properties
3.
Multi-touch
4.
Scrolling
5.
Prevent Scrolling
6.
Frequently Asked Questions
7.
Conclusion
Last Updated: Mar 27, 2024

Pointer Events and Scrolling

Career growth poll
Do you think IIT Guwahati certified course can help you in your career?

Introduction

Much of today's web content assumes that the user will be using a mouse as their pointing device. Extensions to the existing pointing device event models are required since many devices allow different forms of pointing input devices, such as pen/stylus and touch surfaces. That's where pointer events come in.

The DOM events fired for a pointing device are known as pointer events. They're made to support pointing input devices like a mouse, pen/stylus, and touch using a single DOM event model (such as one or more fingers).

The pointer is a hardware-independent device that can be used to target a specified set of coordinates on the screen. Having a single pointer event model simplifies the creation of Web sites and applications and also provides a decent user experience independent of the user's hardware. However, pointer-events define a pointerType property to analyse the device type that produced the event in instances when device-specific handling is necessary.

Mouse events (mousedown/pointerdown, mousemove/pointermove, etc.) are equivalent to the events required to handle generic pointer input. As a result, pointer event types are designed to look like mouse event types.

A pointer event also has the same attributes as a mouse event (client coordinates, target element, button states, and so on), as well as new properties for other input types, such as pressure, contact geometry, tilt, and so on. The PointerEvent interface inherits all of the MouseEvent attributes, making the content transfer from mouse to pointer events much more effortless.

Source: Stack Overflow

Pointer event properties

Pointer events have many of the same properties as mouse events, such as clientX/Y, target, and so on, as well as a few more:

  • pointerId – the pointer that caused the event's unique identification.
  • Allows us to use numerous pointers, such as a stylus-enabled touchscreen and multi-touch.
  • pointerType- refers to the pointing device ex- "Mouse," "pen," or "touch".
  • This property can be used to react differently to different pointer types.
  • isPrimary — the primary pointer is true (the first finger in multi-touch)
     

There are different properties for some pointer devices that monitor contact area and pressure, such as for a finger on a touchscreen:

  • Width – the size of the area where the pointer (for example, a finger) makes contact with the device. When using an unsupported device, such as a mouse, it's always 1. 
  • Height – refers to the height of the area where the pointer makes contact with the device. Where the pointer tip isn't supported, it's always 1. 
  • Pressure – refers to the pointer tip's pressure, which can range from 0 to 1. Pressure must be either 0.5 (pressed) or 0 (tangential) for devices that don't support it. The normalised tangential pressure is called pressure.
  • Pen-specific properties such as tiltX, tiltY, and twist indicate how the pen is positioned in relation to the surface.

Multi-touch

Multi-touch, for example, is something that mouse events don't support: a user can touch many areas on their phone or tablet simultaneously or make specific movements.

With the help of the pointerId and isPrimary properties, Pointer Events can handle multi-touch.

When a person taps a touchscreen in one location and then moves their finger to another, the following happens:

  • Pointerdown with isPrimary=true and some pointerId on the initial finger contact.
  • Pointerdown with isPrimary=false and a separate pointerId for each finger for the second and subsequent fingers (the first finger is still touching).

Scrolling

When a scrollbar is utilised for an element in JavaScript, the onscroll event is triggered. When the user pushes the scrollbar up or down, the event is triggered. The CSS overflow property can be used to make a scrollbar.

We can utilise the onscroll attribute in HTML and provide it with a JavaScript function. For further flexibility, we can use JavaScript's addEventListener() method and pass a scroll event to it.

The scroll event allows you to react to the scrolling of a page or element. There are several positive things we can do here.

  • Depending on where the user is in the document, show or conceal extra controls or information.
  • When the user scrolls down to the bottom of the page, load more data.

Prevent Scrolling

How do we make something that doesn't scroll?

We can't use event.preventDefault() in the onscroll listener to prevent scrolling because it fires after the scroll has already happened.

We may, however, disable event-based scrolling.

preventDefault() for an event that causes the scroll, such as the pageUp and pageDown keydown events.

The scroll will not start if we add an event handler to these events and use event.preventDefault().

Because there are so many ways to start a scroll, it's safer to use the CSS overflow property.

Try it on the online JS editor.

Frequently Asked Questions

  1. How do pointer-events analyse device type?
    Pointer-events define a pointerType property to analyse the device type that produced the event in instances when device-specific handling is necessary.
     
  2. When is the onscroll event triggered?
    When a scrollbar is utilised for an element in JavaScript, the onscroll event is triggered.
     
  3. Why is it safer to use a CSS overflow property to prevent scrolling?
    It's safer to use the CSS overflow property because there are a vast number of ways to start a scroll, and their individual handling can get very complicated.

Conclusion

In this article, we have extensively discussed pointer events, pointer event properties and scrolling. We hope this blog has helped you enhance your knowledge regarding pointer events and scrolling. If you want to learn more, check out our articles on Code studio.

Do upvote our blog to help other ninjas grow.

 

Happy Coding!

Live masterclass