デバイスがタッチスクリーンかどうかJavaScriptで判定する。

ユーザのマウスクリックや画面タッチで何かしらの操作を行ってもらう時に、マウスイベントを捕捉するのかタッチイベントを捕捉すれば良いのか簡単に切り分ける方法のメモ。

まず、最近の Internet Explorer の場合、マウスイベントとタッチイベントを包括した「ポインターイベント」というのがサポートされています。こいつをサポートしているかどうかは、window.navigatorの msPointerEnabled プロパティが存在するかどうか（または、それが存在し、値がtrueに設定されているかどうか）を判別すればOK。

<script>
if( navigator.msPointerEnabled ){
   // Windows IEの場合
}else{ // msPointerEnabled プロパティが存在しない。
   // それ以外の場合
}
</script>

Windows上で動作するその他のブラウザや、Windows以外のプラットフォームでは、ontouchstartプロパティが存在するかどうかを確かめれば、タッチ対応か否かを判別できます。

<script>
if( window.ontouchstart === null ){ // 注：ontouchstartが存在しない時は undefined が返る
   // タッチスクリーンの場合
}else{
   // それ以外の場合
}
</script>

または、

<script>
if( "ontouchstart" in window ){
   // タッチスクリーンの場合
}else{
   // それ以外（マウス）の場合
}
</script>

と、こんな感じで大丈夫かと思います。

注意しなくてはならないのは「タッチスクリーン搭載のWindows 8なPC上で動いているChromeやらFirefox」の場合。上記の判定で切り分けるとマウスでの操作が出来なくなりますね。で、全く意味のないサンプルプログラム…

<script>
if( navigator.msPointerEnabled ){
   window.addEventListener('MSPointerDown',function(){alert('pointer');},false);
}else{
   if( window.ontouchstart === null ){
      //touchイベントがあればそれを捕捉
      window.addEventListener('touchstart',function(){alert('touch');},false);
   }
   if( window.onmousedown === null ){
      //mouseイベントがあればそれを捕捉
      window.addEventListener('mousedown',function(){alert('mouse');},false);
   }
}
</script>

…と、こんな具合で良かろう。

カテゴリ:

タグ: