2

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

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

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

谢谢

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>

4

2 回答 2

2

我通过从指针事件返回触摸事件并添加 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>

于 2020-10-12T11:15:38.330 回答
2

前段时间我遇到了同样的问题,发现了一个黑客解决方法,只需在 touchmove 上添加 preventDefault 即可。这似乎暂时解决了它。

更多细节在这里

于 2021-06-16T22:00:22.630 回答