1

ドラッグ可能なアイテム（コンテナ内のマップ）があるページで作業しています。マウスでクリックしてドラッグすると、マップが移動し、すべてが正常になります。次に、タッチデバイス（スマートフォンやタブレットなど）にも同じ機能を追加したいと思いました。ネットを検索したところ、タッチ入力をマウス入力に「変更」して、ページ全体をドラッグせずにマップをドラッグできるようにする動作スクリプトを見つけました（これは標準の動作です）。これは、行を使用して行われます

event.preventDefault()

タッチの間隔を調整することで、クリックイベントを発生させることもできます。私はコーディングの天才ではなく、このプログラミングはすべて他の人によって行われました。タッチデバイスのJavascriptドラッグアンドドロップで説明を見ることができます（私はトップアンサーの元のコードと、トップアンサーのすぐ下の回答のタイミングコードを使用しました）。

ここまでは順調ですね。マウスを使用している場合と同じように、マップをドラッグして、マップまたはページ上のリンクをクリックできるようになりました。これは、私が試したすべてのタッチブラウザで機能します（私はあまり試していませんが、試したものは機能します）。唯一の問題は、タッチのデフォルトの動作が無効になっているため、ページ自体をドラッグできないことです。これは、ページのコンテンツ（たとえば、マップコンテナのサイズ）がブラウザウィンドウよりも大きい場合に問題になります。

幸いにもこれに対する答えが提供されました（これは私が上にリンクしたページの一番下の答えです）：置換

event.preventDefault()

と

if (touches.length > 1) event.preventDefault();

タッチのデフォルトのスクロール/サイズ変更などは、1本の指を使用する場合は機能しますが、複数の指を使用する場合は、デフォルトの動作が妨げられます。つまり、2本の指を使用すると、ページをドラッグせずにマップをドラッグできますが（前と同じように）、1本の指を使用すると、ページをドラッグできます。私には非常にエレガントに見えるので、私はこのソリューションが本当に好きです。

さて、私は回線を追加し、HTC Incredible電話のデフォルトのブラウザでテストしました（小さな画面になりますが、それは私が持っているものです）。デフォルトのブラウザは単に「インターネット」と呼ばれます。すべてが完璧に機能します！それで、私はFirefoxとOperaでテストしましたが、残念ながら、それらは完全には機能していません。かつては

event.preventDefault()

「if」ステートメント内にある場合は完全に無視されるため、マップをドラッグするとドラッグされます（タッチはマウスのドラッグに変換されるため）が、ページ自体もドラッグされます。私が使用する指の数。要するに：ページはあたかもないかのように振る舞います

event.preventDefault()

トリガーされます。

私は数時間見回して、FirefoxとOperaでイベント変数を初期化またはインポートして使用できるようにする必要があると思うようになりました。ここで説明するように：jQuery event.preventDefault（）がFirefoxで機能しない（JSFiddleが含まれています）。

私の質問（ついに）：これは正しいでしょうか？イベントを「if」ステートメントに「インポート」するにはどうすればよいですか？

コードはここにあります（init()関数はbody onloadによってトリガーされます）

    <script type="text/javascript">
    
    var clickms = 400;
    var lastTouchDown = -1;
    
    function touchHandler(event)
    {
    
    var touches = event.changedTouches,
    first = touches[0],
    type = "";
    
    var d = new Date();
    switch(event.type)
    {
    case "touchstart": type = "mousedown"; lastTouchDown = d.getTime(); break;
    case "touchmove": type="mousemove"; lastTouchDown = -1; break;        
    case "touchend": if(lastTouchDown > -1 && (d.getTime() - lastTouchDown) < clickms){lastTouchDown = -1; type="click"; break;} type="mouseup"; break;
    default: return;
    }
    
    var simulatedEvent = document.createEvent("MouseEvent");
    simulatedEvent.initMouseEvent(type, true, true, window, 1,
                      first.screenX, first.screenY,
                      first.clientX, first.clientY, false,
                      false, false, false, 0/*left*/, null);
    
    first.target.dispatchEvent(simulatedEvent);
    if (touches.length > 1)
    {
    event.preventDefault();
    }
    
    }
    
    function init()
    {
    document.addEventListener("touchstart", touchHandler, true);
    document.addEventListener("touchmove", touchHandler, true);
    document.addEventListener("touchend", touchHandler, true);
    document.addEventListener("touchcancel", touchHandler, true);    
    }
    
    </script>

編集：FirefoxまたはOperaが2本の指のジェスチャが実行されたことを実際に登録するかどうかを確認するために、ifステートメントにアラートステートメントを挿入しようとしたことを追加する必要があります。アラートは問題なくトリガーされるため、FirefoxまたはOperaが2本指のジェスチャを開始すると、少なくともこの方法では、ジェスチャの標準的な動作（ページの描画またはサイズ変更）を停止できないことが問題になる可能性があります。

4

1 に答える 1

0

私は問題を解決したようです（少なくともテストのために自由に使えるブラウザで）

私がしたことは変化していました

    if (touches.length > 1) {
      event.preventDefault();
    }

に

    if (event.touches.length > 1) {
      event.preventDefault();
    }

ページの残りの部分を移動せずに、2本の指を使用してドラッグ可能な要素をドラッグできるようになりました。FirefoxとOperaでは1本の指で地図をドラッグすることは可能ですが、「ドラッグしたいときに2本の指だけを使用する」という態度を採用するとすぐに、これは些細なことです。

唯一の小さな問題は、FirefoxとOperaの両方が、焦点を合わせるために選択した指先の間を行ったり来たりしているように見えることです。特に、指が少し離れている場合は、ドラッグ可能な要素が多少揺れます。この動作は「インターネット」ブラウザには表示されません。

于 2012-09-27T10:27:26.110 に答える