Home > Uncategorized > Force touch #Javascript #3DTouch

Force touch #Javascript #3DTouch

force-touch-642x347

Force touch is a feature of iPhone 6S and above, and Android N devices (Huawei 7P) – it’s by no means widely supported, but if you fancy doing something special for your high-end users, then it’s an option to use for a “hidden feature” or shortcut. – A Peek to view master-detail anyone?

In Javascript it’s easily implemented; touchforcechange event, and ensure that “force” is set to 1 (maximum). If you don’t check the “force” value, then this will react to gentle clicks too – confusing the interface with the”click” event.

var element = document.getElementById(‘forceMe’);
function addForceTouchToElement(elem) {

elem.addEventListener(‘webkitmouseforcechanged’, onClickForceChange, false);
elem.addEventListener(‘touchforcechange‘, onTouchForceChange, false);
}

function onClickForceChange(e) {
alert(“onClickForceChange”);
}

function onTouchForceChange(e) {
if (e.changedTouches[0].force == 1)
{
alert(“onTouchForceChange”);
}
}
addForceTouchToElement(element);

 

Advertisements
Categories: Uncategorized
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: