iPadOS 14 Apple Pencil快速攻丝不起作用. -HTML JavaScript ontouchstart/onpointerdown [英] iPadOS 14 Apple Pencil fast tapping not working. - HTML JavaScript ontouchstart/onpointerdown
问题描述
我有一个html/js/canvas绘图应用程序，更新到iPadOS 14之后，我再也无法使用Apple Pencil快速点击了.如果我使用鼠标或手指输入此代码，则事件会快速触发并每次切换.当我使用Apple Pencil时，不会调用handleStart()，这在屏幕上的日志中很明显.有时，当铅笔在iPad上时，它甚至显示handleEnd(). (尝试使用Apple Pencil快速点击在iPad上的代码段，然后使用手指或鼠标)
I have a html/js/canvas drawing app, and after updating to iPadOS 14, I can no longer fast tap with the Apple Pencil. If I use a mouse or my finger with this code the events fire fast and toggle every time. When I use the Apple Pencil, the handleStart() does not get called, which is obvious with on-screen log. Sometimes it even shows handleEnd() while the pencil is on the iPad. (Try snippet on iPad with Apple Pencil fast tapping, then use finger or mouse)
其他人是否在他们的Web应用程序中看到了这个新问题，或者知道可能的解决方法?还是有人可以用他们的ipad和铅笔进行测试以确认此错误?使用手指是快速响应，铅笔会错过快速的快速触摸和较慢的响应时间.我在使用iPadOS 13的较旧的iPad上进行了测试，并且铅笔的笔触效果很好.所以我不认为它的硬件.
Did anyone else see this new problem in their web apps or know a possible work around? Or can anyone just test with their ipad and pencil to confirm this bug? Using finger is fast response, pencil misses rapid fast touches and slow response time. I tested on an older iPad with iPadOS 13 and the pencil works fine with fast touches. So I don't think its hardware.
我在此绘图站点( https://drawisland.com/device )上进行了一些测试似乎没有相同的问题(我可以快速点击并每次绘制)，所以我想知道它们是否以不同的方式处理事件，或者是否将某些内容设置为Apple Pencil或Stylus模式.
I did some testing on this drawing site (https://drawisland.com/device) and it doesn't seem to have the same problem (I can tap fast and it draws every time) so I wonder if they are handling events differently or have something set to a Apple Pencil or Stylus mode.
谢谢
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>
推荐答案
我找到了解决方法，方法是从指针事件返回触摸事件，并添加e.preventDefault().我已经看过多次preventDefault()甚至在我的某些代码中都有它，但是在iPadOS 14之前，它不需要快速点击.我认为，由于Apple Pencil在输入字段中具有手写功能，因此可能已经改变了很多事情.
I found the fix by going back to touch events from pointer events, and adding e.preventDefault(). I have seen preventDefault() many times and even have it in some of my code, but before iPadOS 14 it was not required for fast tapping. I think they may have changed many things with the Apple Pencil because of all the new features for hand writing in input fields, etc.
这现在仅适用于触摸设备.
This will now only work on touch devices.
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>
这篇关于iPadOS 14 Apple Pencil快速攻丝不起作用. -HTML JavaScript ontouchstart/onpointerdown的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
