【JavaScript】マウスデバイスとタッチデバイスを判別する方法

こんにちは！CODE CLUB965のKです！

今回は、スマホやタブレットのようなマウスデバイスかPCのようなマウスを使うデバイスを判別する方法について紹介しようと思います。

マウスデバイスかタッチデバイスか

方法としては、mousemove と touchstart の2つのイベントを利用することで判別します。

mousemoveイベントが起こればマウスデバイス、touchstartイベントが起こればタッチデバイスと判定するようなコードをJavaScriptで書いてあげればいいだけです。

以下にコード例を書きますので参考にして下さい。

var device_type = 0 ;

function checkDeviceType( event ) {
	device_type = event.changedTouches ? 1 : 2 ;

	document.removeEventListener ( "touchstart", checkDeviceType );
	document.removeEventListener ( "mousemove", checkDeviceType );
}

document.addEventListener ( "touchstart", checkDeviceType );
document.addEventListener ( "mousemove", checkDeviceType );

タッチデバイスでもmousemoveイベントは起こりうるので、判定後にremoveEventListenerでイベントを削除してしまいます。

device_typeには、タッチデバイスなら1、マウスデバイスなら2 となります。

ちなみに、上記の例の中の「device_type = event.changedTouches ? 1 : 2 ;」の意味がわからない方は下記の記事を参考にして下さい。

条件演算子を使った記述方法です。

最後に

今回は、マウスデバイスかタッチデバイスかを判別する方法について書きました。

上記で紹介したコードは簡単に書けていいのですが、1つ問題もあります。

考えられる問題として、タッチとマウスの両方に対応したデバイスの場合、タッチ操作でタッチデバイス判定になった後、マウス操作をした場合にマウスデバイスをタッチデバイスと間違って認識してしまう可能性があります。

ただ、このようなケースは稀なケースなので特に気にしないのであれば大丈夫ですが、気になる場合は上記のコードを変更する必要があるのでご注意ください。

それでは、また！

Follow me!