Jquery スワイプ処理で縦・横イベントを判断する方法

2020年3月17日

　スワイプとは、スマホで指でなぞる動きです。
例えば右から左スワイプでページ切り替え、上から下へなぞると続きを読み込むなどの処理があります。

今回は縦・横スワイプでイベントを判断する機会があり、調べましたので忘備録として記録いたします。

今回の内容

1. 今回はこのような処理を作りました。
2. 仕組みはJqueryの「タッチイベント」を使用した座標の比較
3. サンプルソースはこちらです
4. 解説①初期メッセージ表示
5. 解説②タッチ開始したかを判定
6. 解説③指で触れながら動いたかを判定
7. 解説④指が離れたかを判定
8. 解説⑤指が触れた時に初期化処理を行う
9. 解説⑥スワイプ中は座標の方向を判定する
10. 解説⑦指が離れたときに目的の処理を実行する
11. スマホではスワイプ処理は重宝します。

今回はこのような処理を作りました。

スワイプ処理とはスマートホン限定での処理になります。
※PCでは動作しません。

サンプルページはこちらです。

スマホで四角の部分を指でなぞっていただくと、どのようになぞったかメッセージが表示されます。

仕組みはJqueryの「タッチイベント」を使用した座標の比較

Jqueryには様々な便利関数があります。
今回は「touchイベント」で座標の移動を判断し、スワイプの向き、方向を判断しています。

例えば指が左から右へ移動した場合、「右移動」と判断します。
下から上ならば「上移動」です。

これを以下のように判断します。

タッチ開始時の座標を取得
指移動時に座標比較し向きを判定
指を離した時点でスワイプの向きを確定

使用するJquery イベントは以下の３つです。

（１） touchstart

タッチ開始時にイベントが発生します。

（２） touchmove

指を動かしたときにイベントが発生します。

（３） touchend

指を離した時にイベントが発生します。

サンプルソースはこちらです

今回のサンプルHTMLのソースを以下に記述します。

<!doctype html>
<html>
<head>
<meta charset="shift_jis">
<title>スワイプテスト</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function()
{
	/** ①初期メッセージ出力 */
	$("#msg").text("スマホで下の枠を指でスワイプしてください");

	/** ②指が触れたか検知 */
	$("#box").on("touchstart", start_check);

	/** ③指が動いたか検知 */
	$("#box").on("touchmove", move_check);

	/** ④指が離れたか検知 */
	$("#box").on("touchend", end_check);

	/** 変数宣言 */
	var moveY,modeX, posiY, posiX;


	// ⑤タッチ開始時の処理
	function start_check(event) 
	{
		/** 現在の座標取得 */
		posiY = getY(event);
		posiX = getX(event);

		/** 移動距離状態を初期化 */
		moveY = '';
		moveX = '';

		/** 表示メッセージを初期化 */
		msgY = '';
		msgX = '';
	}

	// ⑥スワイプ中の処理
	function move_check(event)
	{
		if (posiX - getX(event) > 70) // 70px以上移動でスワイプと判断
		{
			/** 右→左と判断 */
			moveX = "left";
		}
		else if (posiX - getX(event) < -70)  // 70px以上移動でスワイプと判断
		{
			/** 左→右と判断 */			
			moveX = "right";
		}

		if (posiY - getY(event) > 70) // 70px以上移動でスワイプと判断
		{
			/** 下→上と判断 */
			moveY = "top";
		}
		else if (posiY - getY(event) < -70)  // 70px以上移動でスワイプと判断
		{
			/** 上→下と判断 */			
			moveY = "bottom";
		}
	}

	// ⑦指が離れた時の処理
	function end_check(event)
	{
		if (moveX == "left")
		{
			msgX = "左へ移動";
		}
		else if (moveX == "right")
		{
			msgX = "右へ移動";
		}
		else
		{
			msgX = "移動なし";
		}


		if (moveY == "top")
		{
			msgY = "上へ移動";
		}
		else if (moveY == "bottom")
		{
			msgY = "下へ移動";
		}
		else
		{
			msgY = "移動なし";
		}


		$("#msg").text("（横移動）"+msgX+":"+"（縦移動）"+msgY);

	}


	// 座標取得処理
	function getY(event) 
	{
		//縦方向の座標を取得
		return (event.originalEvent.touches[0].pageY);
	}

	function getX(event) 
	{
		//横方向の座標を取得
		return (event.originalEvent.touches[0].pageX);
	}


});

</script>
<style type="text/css">
#msg
{
	text-align: center;
}
#box 
{
	background-color: #eee;
	height: 300px;
	width: 80%;
	display: block;
	border: 1px solid #999;
	margin-right: auto;
	margin-left: auto;
}
</style>
</head>

<body>
<div id="msg"></div>
<div id="box"></div>
</body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

<!doctype html>

<html>

<head>

<title>スワイプテスト</title>

$(document).ready(function()

{

/** ①初期メッセージ出力 */

$("#msg").text("スマホで下の枠を指でスワイプしてください");

/** ②指が触れたか検知 */

$("#box").on("touchstart", start_check);

/** ③指が動いたか検知 */

$("#box").on("touchmove", move_check);

/** ④指が離れたか検知 */

$("#box").on("touchend", end_check);

/** 変数宣言 */

var moveY,modeX, posiY, posiX;

// ⑤タッチ開始時の処理

function start_check(event)

{

/** 現在の座標取得 */

posiY = getY(event);

posiX = getX(event);

/** 移動距離状態を初期化 */

moveY = '';

moveX = '';

/** 表示メッセージを初期化 */

msgY = '';

msgX = '';

}

// ⑥スワイプ中の処理

function move_check(event)

{

if (posiX - getX(event) > 70) // 70px以上移動でスワイプと判断

{

/** 右→左と判断 */

moveX = "left";

}

else if (posiX - getX(event) < -70) // 70px以上移動でスワイプと判断

{

/** 左→右と判断 */

moveX = "right";

}

if (posiY - getY(event) > 70) // 70px以上移動でスワイプと判断

{

/** 下→上と判断 */

moveY = "top";

}

else if (posiY - getY(event) < -70) // 70px以上移動でスワイプと判断

{

/** 上→下と判断 */

moveY = "bottom";

}

// ⑦指が離れた時の処理

function end_check(event)

{

if (moveX == "left")

{

msgX = "左へ移動";

}

else if (moveX == "right")

{

msgX = "右へ移動";

}

else

{

msgX = "移動なし";

}

if (moveY == "top")

{

msgY = "上へ移動";

}

else if (moveY == "bottom")

{

msgY = "下へ移動";

}

else

{

msgY = "移動なし";

}

$("#msg").text("（横移動）"+msgX+":"+"（縦移動）"+msgY);

}

// 座標取得処理

function getY(event)

{

//縦方向の座標を取得

return (event.originalEvent.touches[0].pageY);

}

function getX(event)

{

//横方向の座標を取得

return (event.originalEvent.touches[0].pageX);

}

});

</script>

#msg

{

text-align: center;

}

#box

{

background-color: #eee;

height: 300px;

width: 80%;

display: block;

border: 1px solid #999;

margin-right: auto;

margin-left: auto;

}

</style>

</head>

<body>

</body>

</html>

解説①初期メッセージ表示

	/** ①初期メッセージ出力 */
	$("#msg").text("スマホで下の枠を指でスワイプしてください");

1 2	/** ①初期メッセージ出力 */ $("#msg").text("スマホで下の枠を指でスワイプしてください");

処理結果を出力する部分に、初期メッセージを表示しています。
$(“#msg”)には、出力するIDをしています。

解説②タッチ開始したかを判定

	/** ②指が触れたか検知 */
	$("#box").on("touchstart", start_check);

1 2	/** ②指が触れたか検知 */ $("#box").on("touchstart", start_check);

指が触れたかを判定しています。
Jqueryのon処理は、クリック、スクロール、リサイズなど画面に動的な操作をした場合に発生するイベントを判断します。

touchstartは、スマホ等で指で触れた瞬間に特定の関数を呼び出します。

解説③指で触れながら動いたかを判定

	/** ③指が動いたか検知 */
	$("#box").on("touchmove", move_check);

1 2	/** ③指が動いたか検知 */ $("#box").on("touchmove", move_check);

touchmoveは指で触れたまま、動いたときにイベントが発生します。
その際に、特定関数を呼び出しします。

解説④指が離れたかを判定

	/** ④指が離れたか検知 */
	$("#box").on("touchend", end_check);

1 2	/** ④指が離れたか検知 */ $("#box").on("touchend", end_check);

touchendは、指が離れた時にイベントが発生します。
その際に、特定関数を呼び出しします。

解説⑤指が触れた時に初期化処理を行う

	// ⑤タッチ開始時の処理
	function start_check(event) 
	{
		/** 現在の座標取得 */
		posiY = getY(event);
		posiX = getX(event);

		/** 移動距離状態を初期化 */
		moveY = '';
		moveX = '';

		/** 表示メッセージを初期化 */
		msgY = '';
		msgX = '';
	}