Mobile and Desktop Event Normalization with pointer.js

By  on  

The mobile revolution brought in a variety of new challenges, one being interaction and event handling.  We have a set of new touch events and the traditional desktop events, and click events work on both devices, but mousemove and touchmove aren't always in sync, and there are a number of other nuances you run into with different devices.  That's why Mozilla's uber-talented Web Developer Potch created pointer.js, a utility to help developers more easily manage events across devices.

pointer.js Documentation

The pointer.js documentation explains the project as well and simply as it should, so I wont reinvent the wheel.  Straight from the docs:

Types of Events

The following events are generated:

  • pointerdown: based on mousedown/touchstart
  • pointerup: based on mouseup/touchend
  • pointermove: based on mousemove/touchmove
  • pointerleave: based on mouseout/touchleave
  • pointerclick: a 'fast click' event based on a sequence of the above events. Additional heuristics are applied to determine whether or not to generate a pointerclick.

Event Objects

pointer events have the following custom properties:

  • maskedEvent: the event that triggered the pointer event.
  • touch: boolean- is maskedEvent a touch event?
  • mouse: boolean- is maskedEvent a mouse event?
  • x: page-normalized x coordinate of the event.
  • y: page-normalized y coordinate of the event.

Simple APIs are the best APIs, and Potch nailed this one.

pointer.js Usage

Here are a few example usages of pointer.js:

var element = document.getElementById("myElement");

element.addEventListener("pointerdown", function(detailedEvent) {
	// Do something
});

element.addEventListener("pointerleave", function(detailedEvent) {
	// Do something
});

element.addEventListener("pointerclick", function(detailedEvent) {
	// Do something
	if(detailedEvent.mouse) {
		// desktop
	}
	else {
		// mobile
	}
});

Potch wrote the JS such that you are adding custom event listeners in a traditional way via addEventListener.  I also love that Event object is true, not a new object that provides the original event as one property.  The additional information added to the object is useful in identifying the platform and which event was actually fired.

Event normalization was one of the original reasons for the first event frameworks...and they didn't even have to deal with mobile devices!  Potch has done well with this event normalization utility and I can't wait to use it on my next redesign!

Recent Features

  • By
    6 Things You Didn’t Know About Firefox OS

    Firefox OS is all over the tech news and for good reason:  Mozilla's finally given web developers the platform that they need to create apps the way they've been creating them for years -- with CSS, HTML, and JavaScript.  Firefox OS has been rapidly improving...

  • By
    CSS @supports

    Feature detection via JavaScript is a client side best practice and for all the right reasons, but unfortunately that same functionality hasn't been available within CSS.  What we end up doing is repeating the same properties multiple times with each browser prefix.  Yuck.  Another thing we...

Incredible Demos

  • By
    iPhone-Style Passwords Using MooTools PassShark

    Every once in a while I come across a plugin that blows me out of the water and the most recent culprit is PassShark: a MooTools plugin that duplicates the iPhone's method of showing/hiding the last character in a password field. This gem of...

  • By
    Animated Progress Bars Using MooTools: dwProgressBar

    I love progress bars. It's important that I know roughly what percentage of a task is complete. I've created a highly customizable MooTools progress bar class that animates to the desired percentage. The Moo-Generated XHTML This DIV structure is extremely simple and can be controlled...

Discussion

  1. Peter Galiba

    Sad, but the pointer.js do not support Pointer events developed by Microsoft for Windows 8 and used in IE10+. Without that supported, I would not call it pointer.js as it does not support pointers, not even multiple pointers. In MS terms a pointer could be mouse, touch or pen. For more details about pointer events see http://msdn.microsoft.com/en-us/library/ie/hh673557(v=vs.85).aspx

  2. @Peter +1. Without windows 8 support i can’t use it at all. Sadly.

  3. Fançois

    What are IE10 and IE8 ?
    Pretty sure IE8 must die.
    With all the problems generated by Micrisoft, you should develop for the web, and not for Microsoft.

    Built web for next users, not just for you and your customers.
    You’ll be happy to make a better world/web ;)

    • François

      woups.

      s/IE8/Windows8

  4. yeah… do you say this to your clients or your boss as well? “Sorry, i develop only for the Web, not for Microsoft” – sorry but this is just stupid.
    While i agree Microsoft is making our lives not easier, it’s the largest platform. Not supporting it is not an option – at all.

  5. Shameless self-promotion alert… if you’re looking for a Pointer Events polyfill that adheres more closely to the specification, I’ve written one called Points.js: https://github.com/Rich-Harris/Points

    It’s not perfect, but the specification as it stands is un-polyfillable (the Points.js readme goes into why, and what the limitations are).

    The W3C’s Pointer Events working group is also working towards a more spec-compliant ‘official’ polyfill. Also, the Polymer Project’s polyfill is well worth a look http://www.polymer-project.org/platform/pointer-events.html

  6. The article should contain information about the Pointer Events standard (http://www.w3.org/TR/pointerevents/) and how pointer.js relates to that standard. From what see from the README on GitHub, pointer.js is in the process of being rewritten to support that standard. This information should be mentioned in the article. Leaving it out risks causing confusion.

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!