1

ブラウザーがすべての UI をスケーリングできるようにするのではなく、JavaScript でピンチ ズーム ジェスチャを処理したい Web アプリケーションがあります。IE11 では、ポインター イベントを処理する要素にタッチ アクション CSS を指定する必要があることを理解しています。

私のアプリケーションでは、パンを除くすべてのタッチ動作を無効にしました (タッチ アクション: pan-x pan-y)。javascript で pointerdown、pointerup、および pointermove イベントを配線し、2 つのアクティブなポインター (ピンチ ジェスチャ) 間の距離に基づいて実行するズームのレベルを決定する独自の計算を追加しました。

デスクトップ上の IE11 では、これは期待どおりに機能します。ただし、IE のモバイル/メトロ バージョン (私は Surface Pro でテストしています) では、特定の時間に複数のポインター イベントを検出することはできません。キャプチャされた最初のイベントでポインタ キャンセルを起動するだけで、2 番目のポインタダウンの起動に失敗します。すべてのタッチ ジェスチャ (touch-action: none) を無効にすると、モバイル ブラウザーでもマルチタッチ ポインター イベントを取得できますが、パンはできなくなります。これは望ましくありません。

問題を示す簡単な jsfiddle を次に示します。

http://jsfiddle.net/wqgg0Ly7/22/

$(document).ready(function()
{
    var pointers = [];

    function pointerDown(e)
    {
        pointers.push(e);

        if (pointers.length >= 2)
            alert("multiple pointers detected");
    };

    function pointerOut(e)
    {
         for (var i in pointers)
             if (pointers[i].pointerId == e.pointerId)
                 pointers.splice(i, 1);
    };

    $(".container")
        .on("pointerdown", pointerDown)
        .on("pointerout", pointerOut)    
        .on("pointercancel", pointerOut);
    });
};

タッチ対応デバイスの IE11 のデスクトップ バージョンでこれをテストすると、これらの DIV のいずれかをつまむことができ、2 つのポインターが検出されたというアラートが表示されます。これと同じテストを IE11 モバイルで実行すると、最初の DIV のみが 2 番目のポインターを検出します。ただし、2 番目の DIV のようなパンは許可されません。

これは単なる IE Metro のバグですか、それとも要素のパンを許可しながら複数のポインター イベントをキャプチャするための回避策はありますか?

4

0 に答える 0