问题
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/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.
A similar question has been asked here: Does Android browser lock DOM on touchStart?
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.
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.
https://s3-eu-west-1.amazonaws.com/canvas-test-pd/index.html
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.
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.
回答1:
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);
Works on my Galaxy Tab. Hope this is what you were trying to do.
回答2:
I had the very same problem. Magically enough, the problem disappeared completely when I added the following line to the <header> section:
<meta name="viewport" content="width=device-width">
回答3:
Answers here helped me a lot.
My solution is simply combination of what has been mentioned here, so if you want:
1. "drag and drop" on Samsung Galaxy S2 native browser (Android 4.1.2)
2. disable user scaling the page (viewport set to no scaling)
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.01">
<script>
window.addEventListener("load", function() {
function onTouchPreventDefault(event) { event.preventDefault(); };
document.addEventListener("touchmove", onTouchPreventDefault, false);
document.addEventListener("touchstart", onTouchPreventDefault, false);
}, false);
</script>
</head>
Viewport
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.01">- unfortunately user can still zoom the page in a little bit, 1.01 is the smallest value that does the job
Disable pinch to zoom
document.addEventListener("touchmove", function (event) { event.preventDefault(); }, false);- this disables pinch to zoom
Disable double tap to zoom
document.addEventListener("touchstart", function (event) { event.preventDefault(); }, false); //OR document.addEventListener("touchend", function (event) { event.preventDefault(); }, false);- this disables double tap to zoom, you can choose if you want to use touchstart or touchend (or both) for this purpouse
回答4:
this will do the trick :)
function touchHandlerDummy(e) { e.preventDefault(); return false; } document.addEventListener("touchmove", touchHandlerDummy, false);
来源：https://stackoverflow.com/questions/10246305/android-browser-touch-events-stop-display-being-updated-inc-canvas-elements-h