俺はclickイベントを書くように、tapイベントを書きたいんだ。

きっとこの少年だって、きっとパズドラとかで画面タップしまくってるハズ。 いや、あれどういうゲームかしらんのですけどね。そしてこれは単にGettyImages使ってみたかっただけですね、はい。

というわけで、タイトルのアレを書いてみました。

参考にさせて頂いたのはこちら。 http://pro-tyablog.blogspot.jp/2013/09/javascript.html

やってることはまんまですね。

(function($){

$.fn.tap=function(callback){

    return this.each(function() {
        $(this).on('touchstart touchmove touchend click', function(event){

            //タッチ開始の場合、要素のdata-isTouchフラグをtrueに       
            if ('touchstart' == event.type){
                $(this).data('isTouch', true);
            };

            //touchmoveを拾った場合、要素のdata-isTouchフラグをfalseに
            if ('touchmove' == event.type){
                $(this).data('isTouch',false);
            };

            //isTouchフラグがあった場合、callbackを呼ぶ。
            if ($(this).data('isTouch')){

                //preventDefaultでclickの発生を抑止
                event.preventDefault();

                // フラグをfalseに
                $(this).data('isTouch',false);

                return callback.call(this)

            };

            if ('click' == event.type){
                //clickの場合は普通にそのまま返す。
                return callback.call(this)
            };

        })
    });
};

})(jQuery);

• ontouchstartでフラグ付けて、
• ontouchmoveでフラグをキャンセル、
• ontouchendでフラグが存在したらイベントを発生させる、

という感じです。ただシンプルに書けるようにしたかったので、jQueryプラグイン化して、tap(fn)で書けるようにしました。 クリックイベントでも発生するので、タッチデバイス向けに高速なタップがなされがちな箇所はこれに置き換えるだけでサクっと 出来る筈。