日報 #59 - スマホのクリックのディレイ問題

禁煙の慰みに始めたコーヒーですが、
イマイチ趣味としての距離感を掴みかねています。
そんなに好きじゃないというのが原因だと思いますが。

さて今日は、全般にわたってヌルい話をします。
どの辺がヌルいかも明記しながらいきましょう。

スマホでclickイベントをとろうとすると、
なんか微妙にレスポンスが遅いと感じることがあります。
ちゃんと調べてないのですが（1ヌルポイント）多分、touch系のイベント発生条件との関係でなんかそんな感じになっちゃってんじゃないっすか？（2ヌルポイント）
今調べてきたら、
https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html#//apple_ref/doc/uid/TP40006511-SW7
こんなページあったから読んどいたらいいじゃない。
要はタッチしてからクリック判定まで色んなイベント判定の可能性がある的な話しよ。 （3ヌルポイント）

で、これじゃサクサク感が損なわれるので対応します。
すぐに思いつくのはtouchendとかtouchstart使えばいんじゃね？ってことですが、
それではスクロールの時にもイベント発生しちゃいます。
そんなスパミーなことしちゃ駄目ですね。
ということで、touchstart -> touchmove -> touched とちゃんと判定をいれていきましょう。

こんな感じ。

(function(window,$){
     var target_dom = '.sp-click';
     var trigger_name = 'spclick';

     // touch start flagmentation
     $(document).on('touchstart', target_dom, function(event){
          $(this).data('spclick_touchstart', true);
     });

     // touch move flagmentation
     $(document).on('touchmove', target_dom, function(event){
          $(this).data('spclick_touchmove', true);
     });

     // touch end flagmentation
     $(document).on('touchend', target_dom, function(event){
          var $this = $(this);
          var spclick_touchstart = $this.data('spclick_touchstart');
          var spclick_touchmove = $this.data('spclick_touchmove');

          // trigger event
          if (spclick_touchstart && !spclick_touchmove )
               $this.trigger('spclick', [this, event]);

          // re-initialize
          $this.data('spclick_touchstart', false);
          $this.data('spclick_touchmove', false);
     });

})(window,$);

単純に、「タッチしたけど動いた？動いてないならクリック判定すっけどどする？」的な関数ですね。
touchstartの前にも初期化したほうがいいけど面倒だからしねぇわ（4ヌルポイント）

これでclass=’sp-click’とかdom要素にしておけば、
spclickイベントをバインドできるよ。
多分。あんま試してないけど、一応動いたよ。（5ヌルポイント）

今日はこんな感じ。
体調崩している人が多いみたいだから、皆気をつけてね。
俺は今日で抗生物質飲み終えたから、体内細菌のバージョンアップが完了したところだよ。
じゃぁね。