Help us understand the problem. What is going on with this article?

【ライブラリ】スマホのタップ対策済みのクリックイベントリスナ(スワイプやフリックは除外)

More than 5 years have passed since last update.

JavascriptでPCならクリック、SPならタップに対してイベントハンドリングをする実装。
ポイントは下記。

  • element.onclickは使わずにelement.addEventListenerelement.attachEventを使う
  • スマホでclickイベントを使うとダブルタップ判定待ちのラグが発生するため、touchXXX系のイベントを使う
  • スワイプやフリックは除外

touchstart発生後にtouchmoveがあればスワイプ/フリックとみなして除外、touchmoveがないままtouchendが来たならタップとみなす。

というふうに実装しています

// ページのDOMツリー構築後に実行(要するにwindow.onload)
function ale(fn){
    if (window.addEventListener) {
        window.addEventListener('load', fn, false);
    } else if(window.attachEvent) {
        window.attachEvent('onload', fn);
    } else {
        window.onload = fn;
    }
}

// 要素にクリックイベントリスナーを付加
function ace(el, fn){
    if (el.addEventListener){
        if(window.ontouchstart === undefined){
            el.addEventListener('click', fn, false);
        }else{
            var fTapped = false;
            el.addEventListener('touchstart', function(){fTapped = true}, false);
            window.addEventListener('touchmove', function(){fTapped = false}, false);
            window.addEventListener('touchend', function(){if(fTapped){fn()} fTapped = false}, false);
        }
    } else if(el.attachEvent){
        el.attachEvent('onclick', fn);
    }
}

// クリック/タップ時に実行する関数
function fn(){alert('clicked');}

// 1個の要素を指定して実行
ale(function(){ace(document.getElementById('room1'), fn)});

// 複数の要素をまとめて指定して実行
(function(){
    var els = document.getElementsByClassName('menu');
    ale(function(){
        for (var i = 0; i < els.length; i++) 
            ace(els[i], fn);
        }
    });
})();

Javascriptの便利なライブラリ

gigamori
広告効果測定やアクセス解析、その他データ分析が専門。WebAPIを使う開発もやっています。ここでは主に計測で使うJavascriptやデータ加工・分析、WebAPI周りの技術をまとめています。主な言語はJavascript、R、RDB(特にDWH系)、シェルスクリプト。
https://www.marketechlabo.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away