Safari for iPadでjQueryを使用してタッチイベントを認識するにはどうすればよいですか?出来ますか?


191

iPadのSafariブラウザでjQueryを使用してタッチイベントを認識できますか?

ウェブアプリケーションでmouseOverイベントとmouseOutイベントを使用しました。mouseOutやmouseMoveなどのイベントがないため、iPadのSafariブラウザに同様のイベントはありますか?

回答:


240

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

  • タッチスタート
  • タッチムーブ
  • タッチエンド
  • タッチキャンセル

たとえば、 touchmove

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

これは、ほとんどのWebKitベースのブラウザー(Androidを含む)で機能します。

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


2
Davidに感謝します。うまくいくと思いますが、e.touches [0]とは何ですか?引数「e」を詳しく説明できますか?
Abhishek B.11年

7
eは、ハンドラーに自動的に渡されるイベントオブジェクトです。Safariブラウザー(およびandroidも)の場合、ユーザーが画面上で行ったすべてのタッチの配列が含まれます。各タッチには独自のプロパティがあります(たとえば、x、y座標)
David Pean

1
今あなたが-__-に、トリガ・イベントにどのような要素を見つけることについてどのように行くのですか
Umerムハンマド

148

jQuery 1.7以降を使用している場合、他のすべての回答よりもさらに簡単です。

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

1
はい、ティモシー、私はプロジェクトの開始時に1.7以降のバージョンを使用していませんでした。今onwords私はjquery 1.7+を使用しています。良い提案と返信ありがとうございます。:)
Abhishek B. 2013

7
これはうまくいきます。同じことをするためにクリックとタッチスタートが必要で、次のように非オブジェクト構文に$('#whatever').on('touchstart click', function(){ /* do something... */ });
慣れてい

1
私が行くとき$('#whatever').on({ 'touchstart' : function(ev){}});evタッチ(タッチ、targetTouchesまたはchangedTouches)に関するすべての情報を持っていないようだ
タコ

8
@タコ:タッチ情報はの下にありev.originalEventます。
Peter Bloomfield

1
@edonbajramiはい、もちろん。ドキュメントをチェックして、「委任されたイベント」を探します。$( "#element to monitor new elements")。on( "eventX"、 "#element"、function(event){/ * whatever * /});
honk31 2014年

24

最も簡単な方法は、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組のイベントハンドラーを記述する必要はありません。ああ、そして私がしたようにjQueryishの方法で書けるようにしたいなら、jQueryプラグインが必要です。


29
「最も簡単な」ソリューションでは、ライブラリを追加して問題を複雑にすることはありません
Octopus

13
@Octopus最も簡単なソリューションは、ブラウザー間の頭痛を取り除くhammer.jsを使用することです。jQuery拡張機能を使用して、使い慣れたゾーンに配置してください。複雑すぎないようです。
trusktr 2014年

1
想定される「最も簡単な」ソリューションは、多くの場合、最も
失敗する

1
@タコ:「あなたが持っているすべてがハンマー[原文のまま]であるとき...すべてが釘のように見えます」:)
Gone Coding

ハンマータイムです!このライブラリを共有していただきありがとうございます。私のアプリケーションにインストールして実行するのは簡単でした。イベントハンドラーが異なるため、セットアップに少し時間がかかりましたが、単純なconsole.log(event)で必要なものがわかります。ありがとう!
アンディ

24

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

$(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 want to execute on tap

       }
 });

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


2
この解決策は、私が見つけた最も単純なもののようで、iOSでうまく機能しているようです。
Joshua Lawrence Austill 2017年

私は最初にjquery mobileを使用しましたが、その後、他の機能に干渉しました。私はこれを今使っており、完璧に動作します。これまでのところ問題はありません。
Anurag Priyadarshi

18

.on()を使用して複数のイベントをキャプチャし、画面上のタッチをテストできます。例:

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

それ以外.bindは非推奨です。使用する必要があります.on
jcuenod

15

jQuery Coreには特別なものはありませんが、jQuery Mobile Eventsで読むことができますページでさまざまなタッチイベントについてます。これらのタッチイベントは、iOSデバイス以外でも機能します。

彼らです:

  • タップする
  • タップホールド
  • スワイプ
  • 左スワイプ
  • スワイプライト

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


私の質問にあなたの重要な時間を与えてくれてありがとう。Jquery Mobileのイベントを調べています。ありがとうございます。
Abhishek B.

これらのイベントは、実際のタッチ操作を実際に表すものではありません。
trusktr 2014年

jQuery Coreは実際の固有名詞ですか?
Peter Mortensen

6

私は少しだけ使用して心配していたtouchmoveそれだけで火にいるようだから、私のプロジェクトのためのとき、ある場所から別の場所にあなたのタッチが移動(とない初期touch上)。だから私はそれを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>

私も..最後のイベントからの経過どのくらいの時間を検出するために、これを追加document.getElementById("ttime").innerHTML = ((new Date()) - touchTime); touchTime = new Date();
hanamj

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.