2018年10月20日(土)
[JavaScript] スマホでtouchイベント #HTML5&CSS3&JavaScript

　スマホでは、onclickのレスポンスが遅く、プログラミングが上手く機能しないことがあります。

　そこで、スマホではtouchイベント（tapイベント）を利用します。

onclick
　↓
ontouchend

　今まで起きていた問題が、すべて解決したようです。

　スマホでは、ontouchendのあとにonclickが処理されます。スマホ用ontouchendとパソコン用ontouchendを併記する場合は、スマホでonclickを無視する仕組みが必要です。

--
<script>

function _click(){
  if(!("ontouchend" in document)){
    tap();
  }else{
    // 処理の順序の確認の為
    alert("click!");
  }
}

function _tap(){
  alert("OK");
}

</script>

<h3 ontouchend="_tap();" onclick="_click();">見出し３</h3>
--


P.S. 下記のように記述しても同様。いずれにせよ、ontouchendが定義されているか判断しています。

if(!("ontouchend" in document))
　↓
if(window.ontouchend === undefined)


P.S.2 さらに、jQueryでは.on()を使用してスマートに記述できるとありますが、あまりそう感じません。jQueryは優秀ですが、自分好みではありません。


P.S.3 『子猫の手』では、この仕組みに切り替える作業をしています。
http://neconote.jp/prg/touch.html