SYNCERのロゴ
アイキャッチ画像

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

ユーザーがマウスデバイスか、タッチデバイスかを判定したい時は、mousemove、touchstartといったイベントを利用しましょう。

サンプルコード

下記がサンプルコードです。最初にmousemoveイベントが起こればマウスデバイス、touchstartイベントが起こればタッチデバイスと判定する単純な仕組みです。タッチデバイスでもmousemoveイベントは起こりうるので、判定後にイベントは削除してしまいます。deviceTypeには、マウスデバイスなら2、タッチデバイスなら1が代入されます。

var deviceType = 0 ;

function detectDeviceType( event ) {
	deviceType = event.changedTouches ? 1 : 2 ;

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

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

このコードは完璧ではありません。例えば、タッチとマウスに両対応したデバイスでタッチ操作をしてタッチデバイス判定になった後でマウス操作をされた場合に、マウスデバイス(モード)をタッチデバイス(モード)と誤認識してしまうでしょう。ただ、そのようなケースはあまりないと思うので、それを気にしなければ、お手軽でいいと思います。当サイトはこのような判定で処理を分けています。

デモ

1ならタッチデバイス、2ならマウスデバイスです。正しく判定できているでしょうか?

var deviceType = 0 ;

function detectDeviceType( event ) {
	deviceType = event.changedTouches ? 1 : 2 ;

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

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

deviceType = 0

  • Twitterでシェア
  • Facebookでシェア
  • Google+でシェア
  • はてなブックマークでシェア
  • pocketに保存
  • LINEでシェア
更新履歴
2017年8月1日 (火)
コンテンツを公開しました。