OnToch листание

fast click : 'fc' swipe left : 'swl' swipe right : 'swr' swipe up : 'swu' swipe down : 'swd'

<script type="text/javascript">
    window.onload = function () {
        (function (d) {
            var ce = function (e, n) {
                    var a = document.createEvent("CustomEvent");
                    a.initCustomEvent(n, true, true, e.target);
                    e.target.dispatchEvent(a);
                    a = null;
                    return false
                },
                nm = true, sp = {x: 0, y: 0}, ep = {x: 0, y: 0},
                touch = {
                    touchstart: function (e) {
                        sp = {x: e.touches[0].pageX, y: e.touches[0].pageY}
                    },
                    touchmove: function (e) {
                        nm = false;
                        ep = {x: e.touches[0].pageX, y: e.touches[0].pageY};
                        i??f(Math.abs(ep.x - sp.x) > 10 && Math.abs(ep.y - sp.y) < 20) e.preventDefault();
                    }
                },
                    touchend: function (e) {
                        if (nm) {
                            ce(e, 'fc')
                        } else {
                            var x = ep.x - sp.x, xr = Math.abs(x), y = ep.y - sp.y, yr = Math.abs(y);
                            if (Math.max(xr, yr) > 20) {
                                ce(e, (xr > yr ? (x < 0 ? 'swl' : 'swr') : (y < 0 ? 'swu' : 'swd')))
                            }
                        };
                        nm = true
                    },
                    touchcancel: function (e) {
                        nm = false
                    }
                };
            for (var a in touch) {
                d.addEventListener(a, touch[a], false);
            }
        })(document);
//EXAMPLE OF USE
        var h = function (e) {
            console.log(e.type, e)
        };
        document.body.addEventListener('fc', h, false);// 0-50ms vs 500ms with normal click
        document.body.addEventListener('swl', h, false);
        document.body.addEventListener('swr', h, false);
        document.body.addEventListener('swu', h, false);
        document.body.addEventListener('swd', h, false);
    }
</script>

<div style="
    width:200px;
    height:200px;
    background-color:grey;
    line-height:200px;
    text-align:center;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    font-size:24px;
    font-famliy:arial;"></div>
<script type="text/javascript">
    (function (D) {
        var
            ce = function (e, n) {
                var a = D.createEvent("CustomEvent");
                a.initCustomEvent(n, true, true, e.target);
                e.target.dispatchEvent(a);
                a = null;
                return 1
            },
            m = (/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ? 'touch' : 'mouse'),
            nm = 1,
            bd = 0,
            sx,
            sy,
            ex,
            ey,
            M = Math,
            MA = M.abs,
            MM = M.max,
            x,
            y,
            xr,
            yr,
            f = {
                touch: {
                    touchstart: function (e) {
                        return ce(e, (sx = e.touches[0].pageX, sy = e.touches[0].pageY, 'sfc'))
                    },
                    touchmove: function (e) {
                        return nm = 0, ex = e.touches[0].pageX, ey = e.touches[0].pageY, 1
                    },
                    touchend: function (e) {
                        return ce(e, nm ? 'fc' : (x = ex - sx, xr = MA(x), y = ey - sy, yr = MA(y), nm = 1, MM(xr, yr) > 20 ? xr > yr ? x < 0 ? 'swl' : 'swr' : y < 0 ? 'swu' : 'swd' : 'fc'))
                    },
                    touchcancel: function (e) {
                        return nm = 0, 1
                    }
                },
                mouse: {
                    mousedown: function (e) {
                        return e.button || (bd = 1, sx = e.x, sy = e.y, ce(e, 'sfc'))
                    },
                    mousemove: function (e) {
                        return !bd || (nm = 0, ex = e.x, ey = e.y, 1)
                    },
                    mouseup: function (e) {
                        return e.button || (bd = 0, ce(e, nm ? 'fc' : (nm = 1, x = ex - sx, xr = MA(x), y = ey - sy, yr = MA(y), MM(xr, yr) > 20 ? xr > yr ? x < 0 ? 'swl' : 'swr' : y < 0 ? 'swu' : 'swd' : 'fc')))
                    }
                }
            };
        for (var a in f[m]) {
            D.addEventListener(a, f[m][a], false)
        }
    })(document)

    /* USAGE */

    function addAllListeners() {
        function func(e) {
            div.innerHTML = v[e.type];
        }

        var div = document.getElementsByTagName('div')[0],
            a = ['sfc', 'fc', 'swl', 'swr', 'swu', 'swd'], b = a.length,
            v = {
                sfc: 'superFastClick',
                fc: 'fastClick',
                swl: 'left',
                swr: 'right',
                swu: 'up',
                swd: 'down'
            };
        while (b--) {
            div.addEventListener(a[b], func, false)
        }
        div.addEventListener('touchstart', function (e) {
            e.preventDefault()
        }, false);
    }
    //window.addEventListener('load',addAllListeners,false)
    addAllListeners();
    /* USAGE */
</script>