縦にスワイプしようとした際にイベントを仕込んだ要素にタッチしてもイベントを動作させない方法

タイトルになんて書いたらわかりやすいだろうか…
って悩んでたら一ヶ月経ってしまいました。嘘ですけど。

『縦にスワイプしようとした際にはイベントを仕込んだ要素にタッチしても何も起こさせない方法』
どういうこと…？
わかりにくくて申し訳ないです…。図に表してみました。

縦に長いレイアウトのサイトを見ています。

ページ下を見るために下から上へスワイプします

アコーディオンのリスト部分にクリックイベントが仕組んであり、ユーザが予期しない動作をしてしまいました…

つまり、スワイプ時にtouchイベントが誤動作するのを防止します

とは言ったもののどうすればいいのでしょうか。
少しづつ整理しつつ解決法を探してみましょう‥

現状の問題点

問題解決フロー

結果、タッチした瞬間に発火するtouchstartイベントとtouchendイベントを使えばうまく動作させられそうです。
実際にどんなコードになるか書いてみました。

コードサンプル

    //対象の要素に触った時に実行される処理
    $(".accordion").bind("touchstart",function(){
      oldY = window.pageYOffset; //対象の要素に触った時の縦方向のオフセット
    }); 
    
    //対象の要素から手が離れた時に実行される処理
    $(".accordion").bind("touchend",function(){ 
      var nowY = window.pageYOffset; //対象の要素に手が離れた時の縦方向のオフセット
      var dif = nowY - oldY;
      if(dif === 0){
     // 差が0 == スワイプでは無いので処理を実行する
     // 実行する処理をここに書く
    });

対象の要素に触った時にオフセットをとって、
離した時もオフセットをとって差分がでたら実行しない。
でてなかったら動いていないということで、本来の動作を実行する。
これだけです。

画像にLightbox風の効果を付けた要素などにもこの対策は有効です。

　

余談：最近インスタントのお味噌汁を出社してすぐ飲む習慣ができてきました…。