Android浏览器的触摸事件停止显示正在更新INC。帆布/元素 - 如何解决？ [英] Android browser touch events stop display being updated inc. canvas/elements - How to work around?
问题描述
在部分的Android的原生浏览器的触摸页面似乎停止显示被更新，直到手指被释放。这种情况出现在HTML元素的动画（开关类）和帆布的动画。但是，它没有停止正常的JS执行和其他事件被触发为正常。在这个问题设备的海豚浏览器也似乎影响（不火狐虽然）。
On some android's native browser touching the page seems to stop the display from being updated until the finger is released. This occurs for both html element based animation (switching classes) and for canvas based animation. It does not however stop normal js execution and other events are fired as normal. On devices with this problem the dolphin browser also seems effected (not firefox though).
Touchstart /移动都有preventDefault（）发射以及stopPropergation（），cancelBubble = TRUE;和e.returnValue = FALSE ;.在CSS WebKit的选择也被禁用。该页面将不会滚动。
Touchstart/move both have preventDefault() fired as well as stopPropergation(), cancelBubble = true; and e.returnValue = false;. In the CSS webkit selection has also been disabled. The page will not scroll.
有一个类似的问题已经被问这里： 难道Android浏览器的DOM锁在touchStart？
A similar question has been asked here: Does Android browser lock DOM on touchStart?
但我想看看这种行为是可以克服的，或者至少发现哪些设备将通过这个问题来实现，它是一个设备或Android版本的问题？如果你不能回答运行演示，并与设备型号和用户代理报告你的经验问题（显示在演示页面底部）作为注释可能会帮助别人或自己回答这个问题。
but I'd like to find out if this behaviour can be overcome, or at least to discover what devices will be effected by the problem, is it a device or version android issue? If you cannot answer the question running the demo and reporting your experience along with your device model and useragent (displayed at bottom of demo page) as a comment might help others or myself answer the question.
下面是一个演示和步骤来重现问题。一个QR code的链接可以在这里找到<一href="https://s3-eu-west-1.amazonaws.com/canvas-test-pd/tmp.png">https://s3-eu-west-1.amazonaws.com/canvas-test-pd/tmp.png.
Here is a demo and steps to reproduce the behaviour. A QR code for the link can be found here https://s3-eu-west-1.amazonaws.com/canvas-test-pd/tmp.png.
<一个href="https://s3-eu-west-1.amazonaws.com/canvas-test-pd/index.html">https://s3-eu-west-1.amazonaws.com/canvas-test-pd/index.html
该网页具有帆布的顶部和在底部的背景图像一个div。每秒画布被清除，并且不同的图像显示，且div有它的类切换（包括0和1的PNG之间切换）。一旦这个已经跳转几次把你的手指在画布（顶灰色的框），并在那里举行。等待，看是否继续动画（有时它会一次或两次，然后停止），并且如果有任何视觉扭曲。
The web page has a canvas at the top and a div with a background image at the bottom. Every second the canvas is cleared and a different image displayed and the div has it's class switched (both toggle between 0 and 1 pngs). Once this has toggled a few times place your finger on the canvas (the top grey box) and hold it there. Wait to see if the animation continues (sometimes it will once or twice then stops) and if there are any visual distortions.
更新 看来，Galaxy Tab的运行3.2需要处理的文件touchstart /结束，而不仅仅是要求申报单的屏幕继续更新显示。由于jimpic。
Update It seems that the Galaxy Tab running 3.2 requires handlers for touchstart/end of document, not just required divs for the screen to continue updating the display. Thanks jimpic.
我开始相信这是引起生产厂家的皮肤问题，虽然这是很难证明的。
I'm starting to believe it's an issue caused by manufacturers skins, although this is difficult to prove.
推荐答案
我真的不能告诉你为什么发生这种情况，但我碰到了类似的问题，在注册文件时，触摸事件。当我注册只触摸移动事件，我正好遇到了同样的问题，但是当我注册了touchstart过，突然的工作。你的情况，只是下面的几行添加到您的main.js
I can't really tell you why this is happening, but I came across a similar problem, when registering for documents touch events. When I registered for only touch move events, I had exactly the same problem you are experiencing, however when I registered for touchstart too, it suddenly worked. In your case, just add the following lines to your main.js
function touchHandlerDummy(e)
{
e.preventDefault();
return false;
}
document.addEventListener("touchstart", touchHandlerDummy, false);
document.addEventListener("touchmove", touchHandlerDummy, false);
document.addEventListener("touchend", touchHandlerDummy, false);
工作在我的Galaxy Tab。希望这是你想要做的事。
Works on my Galaxy Tab. Hope this is what you were trying to do.
这篇关于Android浏览器的触摸事件停止显示正在更新INC。帆布/元素 - 如何解决？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
