移动端滑动事件方法-蒲公英云

移动端滑动事件方法

Dear 丶 2022-06-02 05:40 300阅读 0赞

今天使用jquery.fullpage.js的时候，发现移动端调试不支持滑动事件，于是自己写了一个滑动的事件，如下，使用这个插件时只需要给window绑定一个滑动事件就可以了，不需要添加方法，由于第一次使用，还没看他js的具体信息，只是粗略过了一眼，好，具体内容看代码：

<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='UTF-8'>
    <meta name='referrer' content='always'>
    <meta name='author' content='qiphon'>
    <meta name='robots' content='none'>
    <meta name='keywords' content=''>
    <meta name='description' content=''>
    <meta name='renderer' content='webkit'>
    <meta name='revisit-after' content='7 days'>
    <meta http-equiv=widow-target Content=_top>
    <meta name='viewport'
        content='width=device-width, initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no, shrink-to-fit=no'
        viewport-fit=cover />
    <meta http-equiv='X-UA-Compatible' content='ie=edge,chrome=1'>
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            -webkit-tap-highlight-color: transparent;
        }
        h1 {
            width: 100px;
            height: 100px;
            background: cyan;
            font-size: 14px;
            margin: 300px auto;
            position: relative;
        }
    </style>
</head>
<body>
    <h1>在我上面试试touchmove吧</h1>
    <script>
        // 滑动事件
        /*
    *   @params  el      DOM   点击的元素
    *   @params  fncontainer obj 事件对象集合
    *              left   Function  向左滑动的时候触发   
    *              right  Function  向右滑动的时候触发   
    *              up     Function  向上滑动的时候触发   
    *              down   Function  向下滑动的时候触发   
    *   @params  offset  Num  事件触发的值
    */
        export function touchevent(el = window, fncontainer = {}, offset = 50) {
            var startX, startY,
                endX = 0,
                endY = 0,
                startT = 0;
            el.addEventListener('touchstart', function (e) {
                // console.log(e)
                startT = +new Date()
                startX = e.touches[0].clientX;
                startY = e.touches[0].clientY;
                // console.log("startX->"+startX,"startY ->"+startY)
            }, false);
            el.addEventListener('touchmove', function (e) {
                endX = e.touches[0].clientX;
                endY = e.touches[0].clientY;
                // console.log("endX ->"+endX,"endY ->"+endY)
            }, false);
            el.addEventListener('touchend', function (e) { //debugger
                var lengthX = endX == 0 ? 0 : Math.abs(startX - endX);
                var lengthY = endY == 0 ? 0 : Math.abs(startY - endY);
                // console.log("lengthX"+lengthX,"lengthY"+lengthY)
                if (+new Date() - startT < 600) {
                    lengthX > lengthY && lengthX >= offset &&
                        ((startX - endX) > 0 ?
                            (fncontainer.left && (fncontainer.left).call(el)) :
                            (fncontainer.right && (fncontainer.right).call(el)));
                    lengthY > lengthX && lengthY >= offset &&
                        ((startY - endY) > 0 ?
                            (fncontainer.up && (fncontainer.up).call(el)) :
                            (fncontainer.down && (fncontainer.down).call(el)));
                }
                startX = startY = endX = endY = startT = 0
            }, false);
        }
        touchevent(document.querySelector('h1'), {
            left: function () {
                console.log('left move', this)
            },
            right: function () {
                console.log('right move')
            },
            up: function () {
                console.log('up move')
            },
            down: function () {
                console.log('down move')
            },
        })
    </script>
</body>
</html>