touchmove時は発火しないカスタムイベント

仕様

SPとタブレット時の話です。
touchstartやtouchendでイベントを定義していると、スクロール時にもイベントが走ってしまう。
これを予防して、タップの時のみイベントが走るようにしたい。

カスタムイベントを作成

js

//es6を一部使っているのでbabel通さないと動かないです
var compare_y = (evt) => {
    var touchObj,
        touchstartY,
        touchendY;
    document.addEventListener('touchstart', (e) => {
        touchObj = e.changedTouches[0] ;
        touchstartY = touchObj.pageY ;// Y座標
    });
    document.addEventListener('touchend', (e) => {
        touchObj = e.changedTouches[0] ;
        touchendY = touchObj.pageY ;// Y座標
        if(touchstartY == touchendY) {
            //touchstartのY座標とtouchendのY座標が同一だった場合、カスタムイベントを発火させる
            e.target.dispatchEvent(evt);
        }
    });
};
var touchDecision = () => {
    //uaはuseragent判定用のjsをreqireしてます
    if (!ua.Mobile && !ua.Tablet) return;
    //tapと言うカスタムイベントを作成
    var custom = new CustomEvent('tap');
    compare_y(custom);
};

これでタップの時だけに発火するカスタムイベントができました。

使うとき

js

var _touch = ('ontouchstart' in document) ? 'tap' : 'click'; //PC時はclick、SPとタブレットはtap

var func = function(){
    var $trigger = $('[data-trigger]');
    if(!$trigger.length) return;
    $trigger.on(_touch, function(){
        console.log('tap or click');
    });
};

$(function () {
    touchDecision();
    func();
});

まとめ

もっといい方法があるとは思うんですが、とりあえず自分で考えた限りだとこうなリました。