［js］スマホでクリックイベント「onclick」の感度が悪いと感じたら「ontouchend」を使おう

スマホでクリックイベントの利用を考えた時に最初に浮かぶのがメニューでしょう。
いわゆるハンバーガーメニューというやつです。よく右上か左上にあるこの「」アイコンの。

PCのノリで「」アイコンに対して「onclick=”menuOpen()”」といった具合にしても基本的には問題ありません。
ただ、PCに比べてクリックしてからの反応が何故か少し遅い気がする。。そう感じたことはありませんか？

あるからこの記事を見ているのでしょう。
結論を言うと「onclick」でなく「ontouchend」を使うと速くなります。

じゃ今度からはクリックイベントは「ontouchend」を使おう！
と思った方は要注意！「ontouchend」はPCでは動作しません。
ですので、レスポンシブデザインの場合すべてのクリックイベントを「ontouchend」にするのは下策です。

ここで便利な方法を紹介します。
jQueryで、PCはスマホか（厳密にいうとタッチが有効かどうか）を判断し「onclick」または「ontouchend」を要素に追加する方法です。
この方法で、PCの「onclick」とスマホでサクサクの「ontouchend」を共存させることができます。

$(document).ready(function(){
    //デバイス判定（タッチが有効か否か）
    var isTouchDevice = (('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch);
    //デバイス判定によるイベントの決定
    var eventType = (isTouchDevice) ? 'touchend' : 'click';
    $('イベントを追加する要素').on(eventType, ファンクション名);
});

要素に直接イベントを書き込むのでなく、jQueryで画面読み込み時にイベントを設置する形式です。
みなさまのスマホサクサクライフに貢献できますように。