Javascript のタッチイベントを最適化してみようと思った

今作っているサイトで改めて考えてみる事にしたタッチデバイスでのイベント。
クリックイベントでも良いんだけど、せっかくなので今後の為にと真面目に考えてみたんで御座います。

clickのような動作をタッチイベントでやりたい

タイトルの通りなのですが、Clickをタッチでって内容でググるとみんな、
‘touchstart’か’touchend’で書いてる。

それでは、触れただけ　とか　スクロール中指が離れたトコロ　とかで反応するワケで、非常に過敏になります。

そこで色々調べて、たどり着いた答え。

    var ct,isTouch;

    //タッチデバイス判定
    function isTouchDevice() {
        var result = false;
        if (window.ontouchstart === null) {
            result = true;
        }  
        return result;
    }
    if (isTouchDevice()) {
        ct = 'touchstart';
    }else{
        ct = 'click';
    }

    *****.addEventListener(ct, abc, false);

    //関数abc
    function abc(e){
        issmt(e,abc);
        if(!isTouchDevice() || ( e.type === 'touchend' && isTouch === true )){
          実行したい事・・・・
        }
    }

    //タッチデバイス為の関数
    function issmt(e,fname){
        if( e.type === 'touchstart'){
            isTouch = true;
            e.target.addEventListener('touchend', fname, false);
            e.target.addEventListener('touchmove', fname, false);
        }
        if( e.type === 'touchmove'){
            isTouch = false;
        }
    }

という感じにしてみた。
複数の方のブログを参考にして、最終的に組み合わせてみた感じ？？

‘touchmove’の時にイベントが起これば　isTouch は false　になるので実行したいイベントは起きない。
それを関数にしておけば、コードはそこまで肥大しないかな？と。

動的に追加される場合は、書き方変えないとなんだけど、粗方これで動いてくれた。

ただ、実際のところ’click’だけの時とでどの程度レスポンスが変わるのかは調べて無いけど、悪くは無いんでは？と思っています。

それにしても、スマホの普及のお陰で非常に面倒ですね。
jqueryでその辺完璧なライブラリ出してくれるとサイコーです。

ではでは・・・。

---

---