59

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

4

5 に答える 5

114

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

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番目の更新：

コールアウトをオフにするCSSプロパティを見つけました：-webkit-touch-callout。

于 2009-11-23T08:17:55.920 に答える
7

私は最終的に、ミッキーのソリューションを使用してこれを機能させる方法を見つけましたが、彼の 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' がチャート レンジ フィルターがあるチャート エリアである場合、そのエリアでのみタッチ コントロールを書き換えます。

ありがとうミッキー。それは素晴らしい解決策でした。

于 2014-09-26T05:14:19.390 に答える
4

@Mickey Shine の回答に沿って、Touch Punchはタッチ イベントからクリック イベントへのマッピングを提供します。このサポートを jQuery UI に組み込むように構築されていますが、コードは有益です。

于 2012-12-13T18:12:34.823 に答える
2

@Mickey のコードを Edge と Internet Explorer で動作させるには、シミュレーションを実行する要素の .css に次の行を追加します。

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

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

于 2016-11-01T16:49:51.210 に答える