Javascript touch event: distinguishing finger vs. Apple Pencil

Question

In Mobile Safari, is there any way to distinguish whether a touch event is generated by finger or Apple Pencil?

Answer 1

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

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

You should also have a look at the other properties of each individual Touch like force or azimuthAngle that can give you detailed information about the touch point’s current device(s).

Please note that the Touch interface is only part of a W3C working draft and not official standard yet – however works in iOS 10 + Safari + Apple Pencil.

Answer 2

You can check the touch force with:

e.touches[0].force;

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

Only Apple Pencil events and touches events on iPhone 6s have .force