web-dev-qa-db-ja.com

Safari for iPadでjQueryを使用してタッチイベントを認識する方法出来ますか？

JQueryを使ってiPadのSafariブラウザでタッチイベントを認識することは可能ですか？

私はWebアプリケーションでmouseOverとmouseOutイベントを使いました。 mouseOut、mouseMoveのようなイベントがないため、iPadのSafariブラウザに似たようなイベントはありますか？

jqueryeventsipadjavascript-eventsmobile-safari
186
Abhishek B.

Core jQueryにはタッチイベントに特別なものはありませんが、次のイベントを使用して簡単に独自のものを構築できます。

  • タッチスタート
  • touchmove
  • とんでもない
  • タッチキャンセル

たとえば、touchmovename__

document.addEventListener('touchmove', function(e) {
    e.preventDefault();
    var touch = e.touches[0];
    alert(touch.pageX + " - " + touch.pageY);
}, false);

これはほとんどのウェブキットベースのブラウザ（Androidを含む）で動作します。

ここにいくつかの良いドキュメントがあります：

230
David Pean

あなたがjQuery 1.7以上を使っているならば、それはこれらすべての他の答えよりもさらに簡単です。

$('#whatever').on({ 'touchstart' : function(){ /* do something... */ } });
144
Timothy Perez

最も簡単な方法は Hammer.jsのようなマルチタッチのJavaScriptライブラリ を使うことです。その後、次のようなコードを書くことができます。

canvas
    .hammer({prevent_default: true})
    .bind('doubletap', function(e) { // And double click
        // Zoom-in
    })
    .bind('dragstart', function(e) { // And mousedown
        // Get ready to drag
    })
    .bind('drag', function(e) { // And mousemove when mousedown
        // Pan the image
    })
    .bind('dragend', function(e) { // And mouseup
        // Finish the drag
    });

そしてあなたは進み続けることができます。タップ、ダブルタップ、スワイプ、ホールド、変形（ピンチ）、ドラッグをサポートしています。タッチイベントは、同等のマウスアクションが発生したときにも発生するので、2セットのイベントハンドラを作成する必要はありません。ああ、そして私がやったようにjQueryのように書くことができるようにしたいのなら、あなたはjQueryプラグインが必要です。

24
David Johnstone

ページをスクロールすると、デバイスはそれをタッチまたはタップとしても検出するため、タッチスタートまたはタッチエンドを単独で使用するのは良い解決策ではありません。そのため、タップとクリックのイベントを同時に検出する最善の方法は、画面が動いていないタッチイベントを検出することです（スクロール）。そのためには、このコードをアプリケーションに追加するだけです。

$(document).on('touchstart', function() {
    detectTap = true; //detects all touch events
});
$(document).on('touchmove', function() {
    detectTap = false; //Excludes the scroll events from touch events
});
$(document).on('click touchend', function(event) {
    if (event.type == "click") detectTap = true; //detects click events 
       if (detectTap){
          //here you can write the function or codes you wanna execute on tap

       }
 });

私はそれをテストしました、そしてそれはiPadとiPhoneで私のためにうまく働きます。タップを検出し、タップとタッチスクロールを簡単に区別できます。

22
Iman Sedighi

。on（） を使用して複数のイベントをキャプチャしてから、タッチスクリーンをテストすることができます。

$('#selector')
.on('touchstart mousedown', function(e){
  e.preventDefault();
  var touch = e.touches[0];
  if(touch){
    // Do some stuff
  }
  else {
    // Do some other stuff
  }
});
17
featherbelly

jQuery Coreには特別なものは何もありませんが、さまざまなタッチイベントについての jQuery Mobile Events ページで読むことができます。そうですね。

彼らです：

  • タップ
  • タップホールド
  • swipe
  • 左スワイプ
  • スワイパーライト

また、スクロールイベント中（モバイルデバイス上のタッチに基づく）、iOSデバイスはスクロール中にDOM操作をフリーズします。

15
Karol

私のプロジェクトでtouchmoveだけを使うのは少し心配でした。最初のタッチで）それで私はそれをtouchstartと結合しました、そしてこれは最初の接触とどんな動きにも非常にうまくいくようです。

<script>

function doTouch(e) {
    e.preventDefault();
    var touch = e.touches[0];

    document.getElementById("xtext").innerHTML = touch.pageX;
    document.getElementById("ytext").innerHTML = touch.pageY;   
}

document.addEventListener('touchstart', function(e) {doTouch(e);}, false);
document.addEventListener('touchmove', function(e) {doTouch(e);}, false);

</script>

X: <div id="xtext">0</div>
Y: <div id="ytext">0</div>
5
hanamj

私はこれが少し遅れていることを知っていますが、JQueryの1.4と1.7+の両方のバージョンに対して benmajorのGitHub jQuery Touch Eventsプラグイン をテストしたばかりです。これは軽量で、onとbindの両方で完璧に機能しながら、徹底的なタッチイベントのセットをサポートします。

3
Rohan