マウスイベントへのタッチイベントのマッピングJavaScript

Question

マウス移動イベントで動作するYUIスライダを使用しています。 touchmoveイベント（iPhoneとAndroid）に対応させたいtouchmoveイベントが発生した場合、どのようにマウス移動イベントを生成できますか？ touchmoveのイベントがマウスの移動イベントにマップされ、スライダーで何も変更する必要がないことを、上部にいくつかのスクリプトを追加するだけでいいと思っています。

Answer 1

私は、これはあなたが望むものであると確信しています：

function touchHandler(event) 
{ 
    var touches = event.changedTouches, 
     first = touches[0], 
     type = ""; 
    switch(event.type) 
    { 
     case "touchstart": type = "mousedown"; break; 
     case "touchmove": type = "mousemove"; break;   
     case "touchend": type = "mouseup"; break; 
     default:   return; 
    } 

    // initMouseEvent(type, canBubble, cancelable, view, clickCount, 
    //    screenX, screenY, clientX, clientY, ctrlKey, 
    //    altKey, shiftKey, metaKey, button, relatedTarget); 

    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); 
    event.preventDefault(); 
} 

function init() 
{ 
    document.addEventListener("touchstart", touchHandler, true); 
    document.addEventListener("touchmove", touchHandler, true); 
    document.addEventListener("touchend", touchHandler, true); 
    document.addEventListener("touchcancel", touchHandler, true);  
} 

私はタッチイベントをキャプチャし、手動で一致するように、自分のマウスイベントを解雇しました。コードはそれほど一般的な目的ではありませんが、ほとんどの既存のドラッグアンドドロップライブラリ、おそらくほとんどの既存のマウスイベントコードに適応するのは簡単です。うまくいけば、このアイデアは、iPhone用のWebアプリケーションを開発している人々にとって便利なことでしょう。

アップデート：この投稿には

、私はすべてのタッチイベントにpreventDefaultを呼び出すと、正しく動作してからリンクを防ぐことができますことに気づきました。 preventDefaultに電話をかける主な理由は、電話機がスクロールしないようにすることで、コールはtouchmoveコールバックでのみ呼び出すことができます。このようにすることの唯一の欠点は、iPhoneがドラッグ元にホバーポップアップを表示することがあることです。それを防ぐ手段が見つかったら、私はこの記事を更新します。

2回目の更新：-webkit-touch-callout：

私はコールアウトをオフにするCSSプロパティを見つけました。

Answer 2

@Mickey Shineの答えに沿って、Touch Punchは、クリックイベントへのタッチイベントのマッピングを提供します。このサポートはjQuery UIに組み込まれていますが、the codeは有益です。

Answer 3

私は最終的に、ミッキーのソリューションを使用して、彼のinit関数の代わりにこれを動作させる方法を見出しました。ここでinit関数を使用してください。

function init() { 
    document.getElementById('filter_div').addEventListener("touchstart", touchHandler, true); 
    document.getElementById('filter_div').addEventListener("touchmove", touchHandler, true); 
    document.getElementById('filter_div').addEventListener("touchend", touchHandler, true); 
    document.getElementById('filter_div').addEventListener("touchcancel", touchHandler, true); 
} 

ご覧の場合は「filter_divは、」我々は、チャートの範囲フィルタを持っており、その領域だけに私たちはタッチコントロールを書き換えたいのですチャート領域であります！

ありがとうミッキー。それは素晴らしい解決策でした。次のコードは、使用されるかもしれない、ここでカムバック将来のユーザーについては、

Answer 4

：

var eventMap = {}; 

(function(){ 
var eventReplacement = { 
    "mousedown": ["touchstart mousedown", "mousedown"], 
    "mouseup": ["touchend mouseup", "mouseup"], 
    "click": ["touchstart click", "click"], 
    "mousemove": ["touchmove mousemove", "mousemove"] 
}; 


for (i in eventReplacement) { 
    if (typeof window["on" + eventReplacement[i][0]] == "object") { 
     eventMap[i] = eventReplacement[i][0]; 
    } 
    else { 
     eventMap[i] = eventReplacement[i][1]; 
    }; 
}; 
})(); 

そしてイベントでは、次のように使用します。

$(".yourDiv").on(eventMap.mouseup, function(event) { 
     //your code 
} 

Answer 5

エッジにミッキーのコードの作業@作りのためにとインターネットエクスプローラで、シミュレーションを実行する要素の.cssに次の行を追加します。

.areaWhereSimulationHappens { 
    overflow: hidden; 
    touch-action: none; 
    -ms-touch-action: none; 
} 

これらの行は、エッジとIEのデフォルトタッチを防止します。しかし、それを間違った要素に追加すると、スクロールも無効になります（タッチデバイスのエッジとIEではデフォルトで発生します）。