Javascript touch event: distinctive finger vs Apple Pencil

Question

Is there a way in Mobile Safari to distinguish a touch event from a finger or an Apple Pencil?

Answer 1

The TouchList object of a TouchList event contains detailed information about the touch of individual points. Among the many properties, touchType is probably the most interesting for you, as it contains either a stylus (Apple Pencil) or direct (finger).

 var body = document.getElementByTagName('body'); body.addEventListener('touchstart', function(evt){ // should be either "stylus" or "direct" console.log(evt.touches[0].touchType); }); 

You should also look at other properties of each specific Touch, for example force or azimuthAngle , which can provide you with detailed information about the current devices (points) of touch points.

Please note that the Touch interface is only part of the W3C working project , and not an official standard - however, it works in iOS 10 + Safari + Apple Pencil.

Answer 2

You can check the power of touch with:

 e.touches[0].force; 

But it works for 3DTouch on the iPhone 6s.

Only Apple Pencil events and events related to events on the iPhone 6 have .force