2018年5月20日(日)
[JavaScript] タップイベント #HTML5&CSS3&JavaScript

　スマホかパスコンか判別するときに、JavaScriptにせよPHPにせよ、ブラウザのエージェントで判別していました。当面は問題無いのですが、漏れが生じる可能性があります。

　そこで『タップイベント』が利用できるかどうかで、判別した方が合理的です。下記は、ページ読み込み完了後、デバイス判定するJavaScriptです。

--
if(window.addEventListener){
  window.addEventListener('load',_init,false);
  
}else if(window.attachEvent){
  window.attachEvent('onload',_init);
}

function _init(){
  if("ontouchstart" in window){
    $device = 'mobile';
  }else{
    $device = 'pc';
  }
  alert($device);
}    
--

　自分なんかは、window.onload = function(){内容}が簡単で好きです。

　window.onload は、複数あると上書きされるため、最後の１つだけが作動します。しかし、addEventListenerとattachEventは起動時の関数を複数動作させられるという利点があります。

　IE11とOperaは、addEventListenerはダメで、attachEventなんです。

　なお、この判定だと、タブレットはパソコンではなくスマホと同じとなります。


　また、タブレットやスマホでは、onclickでは動作が鈍いそうです。下記の記述で、デバイスによりtouchstartかclickを使い分けできます。

--
var $tap = window.ontouchstart===null?"touchstart":"click";
 
var $target = document.getElementById("id");
$target.addEventListener($tap,function(){内容}, false);    
--