ZeroPlus Media > Web制作 > JavaScript > 【jQuery】指の移動で発火するtouchmoveイベントの使い方

【jQuery】指の移動で発火するtouchmoveイベントの使い方

JavaScript

2022/04/23

2023/05/06

jQueryにはスマホのみで発火する便利なタッチイベントがあります。タッチイベントの1つのtouchmove()イベントは、スマホをタップして指の移動だけでイベントが発火します。

この記事では「jQueryのtouchmove()イベントの使い方」について解説します。

この記事で身につく内容

jQueryのtouchmove()イベントの使い方

プログラミング学習でこのような経験はありませんか？

目標に向けて何を学べば良いかわからない
調べても解決策が見つからない
現場レベルのスキルが身につくのか不安

これらの悩みは、学習環境を整えることで全て解決することができます。

ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。

なんでも相談できる専属メンター
いつでも技術相談ができるプロ講師
元IT企業CTO監修のカリキュラム

条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。

少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。

今すぐZeroPlus Gateの詳細を見る

touchmove()イベントはタップしたまま移動で発火

touchmove()イベントは、jQueryのイベントの1つです。タッチデバイスで、要素をタップしたまま指を移動させるとイベントが発火します。

基本書式

$('セレクタ').on('touchmove', function(){
  // ここに処理の内容を書く
});

コードを実際に当てはめると、下記のようになります。

<div class="box" id="js-box">タップしたまま指を移動！</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="main.js"></script>

.box {
  width: 200px;
  height: 200px;
  background: orange;
}

const box = $('#js-box');
box.on("touchmove", function () {
  alert('touchmove');

});

出力結果

See the Pen jQuery-touchmove-alert by ZeroPlus (@zeroplus-programming) on CodePen.

タッチデバイスで要素をタップしたまま指を移動するとイベントが発火します。

touchmove()イベントで座標を取得

touchmove()を使った具体例として、「指を移動した座標を取得する」というイベントを紹介します。

コードは下記のようになります。

<div class="box" id="js-box">タップしたまま指を移動！</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="main.js"></script>

.box {
  width: 200px;
  height: 200px;
  background: orange;
}

const box = $('#js-box');

box.on("touchmove", function (e) {
  e.preventDefault();
  const x = e.changedTouches[0].pageX;
  const y = e.changedTouches[0].pageY;
  box.text('X:' + x + ' Y:' + y);
});

出力結果

See the Pen jQuery-touchmove by ZeroPlus (@zeroplus-programming) on CodePen.

タッチした位置の取得はeventオブジェクトのchangedTouchesとpageX、pageYを使います。

changedTouchesは、位置座標を取得するプロパティです。pageXは水平方向の位置座標、pageYは垂直方向の位置座標を取得します。X座標を変数ｘ、Y座標を変数yに格納し、それをtextメソッドで表示しています。

要素をタップしたまま指を移動すると座標が随時取得されて表示されるようになります。