iPadのSafariでタッチイベントを検出：jQuery vs. 純粋なJavaScript

2024-06-30

iPadのSafariでjQueryを使ってタッチイベントを検知する方法

このチュートリアルでは、jQueryを使ってiPadのSafariでタッチイベントを検知する方法を説明します。従来のclickイベントは、iPadでは動作が怪しい場合があります。そのため、touchstartやtouchendなどのタッチイベントを使用する必要があります。

必要なもの

iPad
Safari
jQuery

手順

HTMLファイルにjQueryライブラリを追加します。

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

ターゲット要素にタッチイベントハンドラを追加します。

<div id="myElement"></div>

<script>
$(document).ready(function(){
  $("#myElement").on("touchstart", function(e) {
    alert("タッチされました!");
  });
});
</script>

この例では、#myElement要素がタッチされたときにアラートが表示されます。

補足

以下のタッチイベントを使用できます。
- touchstart: 要素が最初にタッチされたとき
- touchmove: 要素がタッチされたまま移動しているとき
- touchend: 要素からのタッチが離れたとき
changedTouchesプロパティを使用して、タッチ位置などの情報にアクセスできます。
マルチタッチを検出するには、changedTouchesプロパティの長さを確認します。

iPadでは、clickイベントよりもtouchstartやtouchendイベントを使用することをお勧めします。
jQueryには、タッチイベントを処理するための追加プラグインが多数あります。

サンプルコード：jQueryでiPadのSafariにおけるタッチイベントを検知

HTML

<!DOCTYPE html>
<html>
<head>
  <title>jQuery タッチイベントサンプル</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <div id="myElement">要素をタッチしてください</div>

  <script>
    $(document).ready(function(){
      $("#myElement").on("touchstart", function(e) {
        // タッチされた座標を取得
        var touchX = e.originalEvent.changedTouches[0].pageX;
        var touchY = e.originalEvent.changedTouches[0].pageY;

        // タッチされた座標をアラートで表示
        alert("X座標: " + touchX + ", Y座標: " + touchY);
      });
    });
  </script>
</body>
</html>

説明

HTMLコードで、タッチ対象となる要素(#myElement)を作成します。
$(document).ready(function(){})内にて、jQueryのタッチイベントハンドラを設定します。
タッチイベントハンドラ内では、以下の処理を実行します。
- 取得した座標をアラートで表示します。

このサンプルコードは、タッチされた際の座標を取得する例です。実際には、取得した座標情報に基づいて、要素の移動やアニメーションなどの処理を行うことができます。

補足

このサンプルコードでは、touchstartイベントのみを使用しています。touchmoveやtouchendイベントを使用する場合は、それぞれ別のイベントハンドラを設定する必要があります。
マルチタッチを検出するには、e.originalEvent.changedTouches の長さを使用します。
jQueryには、タッチイベントを処理するための様々なプラグインが用意されています。より高度な処理が必要な場合は、プラグインの利用を検討しましょう。

jQuery以外の方法でiPadのSafariでタッチイベントを検知する方法

純粋なJavaScript

<div id="myElement"></div>

<script>
document.getElementById("myElement").addEventListener("touchstart", function(e) {
  alert("タッチされました!");
});
</script>

この例では、addEventListenerメソッドを使用して、touchstartイベントをmyElement要素に登録しています。イベントハンドラ内では、タッチされたことを示すアラートが表示されます。

addEventListenerとオプション

<div id="myElement"></div>

<script>
document.getElementById("myElement").addEventListener("touchstart", function(e) {
  // タッチされた座標を取得
  var touchX = e.changedTouches[0].pageX;
  var touchY = e.changedTouches[0].pageY;

  // タッチされた座標をコンソールログに記録
  console.log("X座標: " + touchX + ", Y座標: " + touchY);
}, { passive: false });
</script>

この例では、addEventListenerメソッドにオプションオブジェクトを渡しています。このオプションオブジェクトを使用して、イベントハンドラの動作を制御できます。ここでは、passiveオプションをfalseに設定することで、デフォルトのスクロール動作を無効化しています。

Eventオブジェクトのプロパティ

タッチイベントオブジェクトには、タッチに関する様々な情報が含まれています。以下に、よく使用されるプロパティをいくつか紹介します。

changedTouches: タッチ中のすべてのタッチに関する情報を含む配列
- pageX: タッチされた位置のX座標
- identifier: タッチを識別するID
target: イベントが発生した要素
preventDefault(): イベントのデフォルト動作をキャンセル

タッチイベントの種類

以下の種類のタッチイベントが利用できます。