マウスデバイスとタッチデバイスを判別する方法
ユーザーがマウスデバイスか、タッチデバイスかを判定したい時は、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
関連記事
- ピンチイン・ピンチアウトでズームする方法
- タッチデバイスのピンチイン、ピンチアウトで画像を縮小、拡大します。
- 要素に適用されているCSSの値を取得する方法
- 要素に適用されているスタイルシートの値を取得します。
- ドラッグオーバー中だけスタイルを適用する方法
- ドロップできる要素にドラッグオーバー中だけスタイルを適用するには、dragoverイベントと、setTimeout()を組み合わせましょう。
- スクロールをする方法
- 絶対的、相対的に位置を指定して、スクロールします。
- 回転ジェスチャーを検出する方法
- タッチデバイスの回転ジェスチャーで画像を回転させます。
- タッチした位置を取得する方法
- スマホなどでタッチした位置座標を取得します。