9

一部の android のネイティブ ブラウザーでは、ページに触れると、指が離されるまで表示の更新が停止するようです。これは、html 要素ベースのアニメーション (クラスの切り替え) とキャンバス ベースのアニメーションの両方で発生します。ただし、通常の js の実行は停止せず、他のイベントは通常どおり発生します。この問題があるデバイスでは、イルカ ブラウザも影響を受けているようです (ただし、Firefox ではありません)。

touchstart/move には、stopPropergation() と同様に preventDefault() が起動されています。cancelBubble = true; および e.returnValue = false;。CSS Webkit の選択も無効になっています。ページはスクロールしません。

同様の質問がここで尋ねられました: Android ブラウザーは touchStart で DOM をロックしますか?

しかし、この動作を克服できるかどうか、または少なくとも問題の影響を受けるデバイスを発見したいのですが、それはデバイスまたはバージョンの Android の問題ですか? 質問に答えられない場合は、デモを実行し、デバイス モデルとユーザー エージェント (デモ ページの下部に表示されます) と共に経験を報告すると、他の人や私自身が質問に答えるのに役立つかもしれません。

これは、動作を再現するためのデモと手順です。リンクの QR コードは、https://s3-eu-west-1.amazonaws.com/canvas-test-pd/tmp.pngにあります。

https://s3-eu-west-1.amazonaws.com/canvas-test-pd/index.html

Web ページには、上部にキャンバスがあり、下部に背景画像がある div があります。毎秒キャンバスがクリアされ、別の画像が表示され、div のクラスが切り替えられます (どちらも 0 と 1 の png の間で切り替わります)。これが数回切り替わったら、指をキャンバス (上部の灰色のボックス) に置いてそのままにします。アニメーションが継続するか (1 回か 2 回終了して停止する場合もあります)、視覚的な歪みがないかどうかを確認します。

更新 3.2 を実行している Galaxy Tab には、画面の表示を更新し続けるために必要な div だけでなく、ドキュメントの touchstart/end のハンドラーが必要なようです。ありがとうジンピック。

これを証明するのは困難ですが、メーカーのスキンが原因の問題であると信じ始めています.

4

4 に答える 4

7

なぜこれが起こっているのかはわかりませんが、ドキュメント タッチ イベントに登録するときに、同様の問題に遭遇しました。タッチ ムーブ イベントのみを登録したときとまったく同じ問題が発生しましたが、タッチスタートも登録したときに突然機能しました。あなたの場合、次の行を 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で動作します。これがあなたがやろうとしていたことであることを願っています。

于 2012-05-08T09:11:07.270 に答える
3

私はまったく同じ問題を抱えていました。<header>魔法のように、セクションに次の行を追加すると、問題は完全に解消されました。

<meta name="viewport" content="width=device-width">
于 2013-12-21T18:19:41.590 に答える
1

ここでの回答は私を大いに助けてくれました。

私の解決策は、ここで言及されていることの単純な組み合わせです。したがって、必要に応じて:
1. Samsung Galaxy S2 ネイティブ ブラウザー (Android 4.1.2) で「ドラッグ アンド ドロップ」します
。 2. ユーザーによるページのスケーリングを無効にします (ビューポートをスケーリングなしに設定)。

<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>

  1. ビューポート
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.01">

    • 残念ながら、ユーザーはページを少しズームすることができます。1.01 がその仕事をする最小値です。

  2. ピンチによるズームを無効にする
    document.addEventListener("touchmove", function (event) { event.preventDefault(); }, false);

    • これにより、ピンチによるズームが無効になります

  3. ダブルタップでズームを無効にする
    document.addEventListener("touchstart", function (event) { event.preventDefault(); }, false); //OR document.addEventListener("touchend", function (event) { event.preventDefault(); }, false);

    • これにより、ズームするためのダブルタップが無効になります。この目的のために touchstart または touchend (または両方) を使用するかどうかを選択できます。
于 2014-05-20T13:20:17.490 に答える
0

これはトリックを行います:)

function touchHandlerDummy(e) { e.preventDefault(); false を返します。} document.addEventListener("touchmove", touchHandlerDummy, false);
于 2012-11-25T11:00:53.223 に答える