Javascript 触摸事件：区分手指与 Apple Pencil

Question

在Mobile Safari中，有什么方法可以区分触摸事件是由手指还是Apple Pencil产生的？

Answer 1

您可以通过以下方式检查触摸力：

e.touches[0].force;

但它也适用于 iPhone 6s 上的 3DTouch。

只有 iPhone 6s 上的 Apple Pencil 事件和触摸事件具有 .force

编辑:

现在 iOs Safari 上有 touchType：

e.touches[0].touchType === 'direct' // this is a finger

e.touches[0].touchType === 'stylus' // this is an Apple Pencil

Answer 2

触摸事件的 TouchList 对象包含有关触摸各个点的详细信息。在众多属性中，touchType 可能是您最感兴趣的，因为它包含 "stylus"（Apple Pencil）或 "direct"（手指）。

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

您还应该查看每个 Touch 的其他属性，例如 force 或 azimuthAngle，它们可以为您提供有关触摸点当前设备的详细信息。

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.

Javascript 触摸事件：区分手指与 Apple Pencil

Javascript touch event: distinguishing finger vs. Apple Pencil

javascript

mobile-safari

touch-event