iPadOS 14 Apple Pencil 快速点击不起作用。 - HTML JavaScript ontouchstart/onpointerdown

Question

我有一个 html/js/canvas 绘图应用程序，更新到 iPadOS 14 后，我无法再使用 Apple Pencil 快速点击。如果我将鼠标或手指用于此代码，事件会快速触发并每次都切换。当我使用 Apple Pencil 时，不会调用 handleStart()，这在屏幕日志中很明显。有时它甚至会在铅笔位于 iPad 上时显示 handleEnd()。（尝试使用 Apple Pencil 快速点击 iPad 上的片段，然后使用手指或鼠标）

有没有其他人在他们的网络应用程序中看到这个新问题或知道可能的解决方法？或者任何人都可以用他们的 ipad 和铅笔测试来确认这个错误吗？使用手指是快速响应，铅笔错过快速快速触摸和缓慢响应时间。我用 iPadOS 13 在较旧的 iPad 上进行了测试，铅笔在快速触摸下工作正常。所以我不认为它的硬件。

我在这个绘图网站上做了一些测试（https://drawisland.com/device），它似乎没有同样的问题（我可以快速点击并且每次都绘制）所以我想知道他们是否正在处理事件不同的方式或将某些设置设置为 Apple Pencil 或 Stylus 模式。

谢谢

document.onpointerdown = handleStart;
document.onpointerup = handleEnd;

//document.ontouchstart = handleStart;
//document.ontouchend = handleEnd;

function handleStart(e) {
  document.getElementById("log").innerHTML = "handleStart() "
}

function handleEnd(e) {
  document.getElementById("log").innerHTML = "handleEnd()"
}

body{
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

<html>

<body style="background-color: aqua; font-size: 26px;">
  <div id="log">LOG</div>
</body>
</html>

<script>
</script>

Answer 1

我通过返回指针事件中的触摸事件并添加 e.preventDefault() 找到了解决方法。我已经多次看到 preventDefault() 甚至在我的一些代码中都有它，但在 iPadOS 14 之前快速点击不需要它。我认为他们可能已经改变了 Apple Pencil 的很多东西，因为在输入字段中手写的所有新功能等。

这现在只适用于触摸设备。

document.ontouchstart = handleStart;
document.ontouchend = handleEnd;

function handleStart(e) {
e.preventDefault()
  document.getElementById("log").innerHTML = "handleStart() "
}

function handleEnd(e) {
e.preventDefault()
  document.getElementById("log").innerHTML = "handleEnd()"
}

body{
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

<html>

<body style="background-color: aqua; font-size: 26px;">
  <div id="log">LOG</div>
</body>
</html>

<script>
</script>

Answer 2

我前段时间遇到了同样的问题并找到了解决方法，只需在 touchmove 上添加 preventDefault 即可。这似乎暂时解决了它。

more details here

iPadOS 14 Apple Pencil 快速点击不起作用。 - HTML JavaScript ontouchstart/onpointerdown

iPadOS 14 Apple Pencil fast tapping not working. - HTML JavaScript ontouchstart/onpointerdown

javascript

html

events

ipad

ipados