俺は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)で書けるようにしました。 クリックイベントでも発生するので、タッチデバイス向けに高速なタップがなされがちな箇所はこれに置き換えるだけでサクっと 出来る筈。