Responding to Force Touch Events? It’s easy!

With the release of the brand new MacBook and the updated version of MacBook Pro Retina (2015) Apple introduced the all new Force Touch trackpad. Essentially it extends the way in which you interact with your MacBook by allowing the system to respond differently to a touch event. This depends on the pressure being allied to the trackpad. So, is it possible to implement that behaviour within your web page or a web app? Turns out it is, but there are certain limits.

The first thing I want to clear up are the limits, and responding to force touch events is limited, at least currently, to OS X El Capitan (10.11), Safari 9 and a small number of MacBooks with the Force Touch trackpad. While the feature won’t work in any of the previous OS X versions ever, your MacBook could still gain that functionality if you buy the “Magic Trackpad 2” accessory from Apple. We also hope that other browsers (like Google Chrome) will be able to provide support for this feature soon as well.  Now with that out of our heads let’s talk about the Force Touch events and how to handle them.

Events

Like any mouse event, force touch fires several events which you can use to preform different actions on your site simply by adding listeners (event handlers) to them. All those events are truly well documented in the official Apple documentation page dedicated to force touch functionality. Nevertheless, let’s see what those events are:

• webkitmouseforcewillbegin – This is probably the first event that you’ll want to handle since this is telling you that the force touch will actually begin. If you don’t handle this event in a way that you prevent the default behaviour (event.preventDefault())  you could easily end up with a dictionary popup showing up below (sometimes above) the element on which you’ve been forced to touch on.
• webkitmouseforcechanged – This event is triggered every time pressure on the trackpad changes in between the mouseup and mousedown events. You can use this event to do different things to a element depending on the applied pressure.
• webkitmouseforcedown – This event fires after enough pressure has been put to the trackpad to activate the so called force click. The system will also provide a taptic feedback when this happens.
• webkitmouseforceup – This event fires after you’ve released enough force from the trackpad to exit the force touch. This system will also provide a slight taptic feedback when this happens.

Now let’s create a simple example that implements the support for the force touch feature.

Implementation

For the purpose of the demo we’ll create a small balloon that will react to the amount of pressure that’s being applied to it and that will pop once you apply enough pressure to trigger the force click event. With that said, the first thing that we need to do is to write some markup and include all the required CSS and JS files. Equally, you’ll need to find two images that will represent two baloon states (inflated and popped).

Now let’s apply some basic styling to our balloon element. To do that we’ll update the style.css file.

Now if we refresh the page within the Safari browser we should see the balloon appear somewhere in the middle of the screen.

Now we’re ready to add some event listeners/handlers to our balloon. To do that we’ll update our scripts.js file.

In the scripts.js file we’ve added 3 event handlers to the img.inflated DOM element. The first event handler listens for the webkitmouseforcewillbegin event and prevents the default system behaviour once that event gets triggered. The second event handler listens for the webkitmouseforcechanged event which gets triggered with every pressure change on the trackpad.

Within that handler we extract the amount of force that’s being applied to the trackpad (event.originalEvent.webkitForce) and then we use that value to make the balloon larger or smaller depending on how hard the trackpad is being pressed. One thing to keep in mind is that within the event we would usually be able to measure pressure changes between values 1 and 3 but; since we’ll “destroy” our balloon when the force click happens, we’ll actually be able to measure pressure values between 1 and 2. Once the amount of pressure hits that number 2, webkitmouseforcedown event will trigger and the third event handler will then hide the inflated balloon and show the popped balloon instead.

In our example we didn’t cover the webkitmouseforceup event since we don’t really need to do anything with our DOM element once the force click gets released. However, if we needed to do something, it would look something like the webkitmouseforcedown event handler.

Usage

Force Touch technology is still very young and not truly well supported so it’s hard to tell when, how or even if it will be used because this type of interaction between user and a device is also rather new, especially to ordinary users with only basic computer knowledge. Nevertheless, it’s fun and it can be used to provide some sort of shortcut for devices that support this kind of interaction, which is something that the updated iOS apps now do on the iPhone 6S and iPhone 6S+ devices. So, let’s just wait and see what the future holds.