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

【问题标题】：Javascript touch event: distinguishing finger vs. Apple PencilJavascript 触摸事件：区分手指与 Apple Pencil
【发布时间】：2016-05-01 09:28:30
【问题描述】：

在Mobile Safari中，有没有办法区分触摸事件是由手指产生的还是Apple Pencil产生的？

【问题讨论】：

标签： javascript mobile-safari touch-event

【解决方案1】：

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

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

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

请注意，Touch 界面只是W3C working draft 的一部分，还不是官方标准——但适用于 iOS 10 + Safari + Apple Pencil。

【讨论】：

【解决方案2】：

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

e.touches[0].force;

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

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

【讨论】：

这很 hacky，但是在触摸事件中检查 var isiPad = (navigator.userAgent.match(/iPad/i) != null); 和 force 的存在似乎是判断它是否是 Apple Pencil 的唯一方法。直到 Apple 在 WKWebView/Safari 中为其添加了一流的支持。