移动端左划右划事件触发简单的代码

最新推荐文章于 2023-11-11 11:16:29 发布

暮志未晚NAN

最新推荐文章于 2023-11-11 11:16:29 发布

阅读量6k

点赞数 2

分类专栏： javascript 文章标签：移动滑动事件

本文链接：https://blog.csdn.net/qq_30100043/article/details/70229412

版权

javascript 专栏收录该内容

73 篇文章 2 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
    <title>Title</title>
    <style>
        *{margin:0;padding:0;}
        ul li {height: 50px; box-sizing: border-box; list-style-type: none; border:1px solid #ccc;}
    </style>
</head>
<body>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>
</body>
<script>
    window.onload = function () {
        var touch = new Touch(document.getElementsByTagName("li"),80).init();
        
        //向左滑动触发事件
        touch.swipeLeft = function (dom) {
            alert(dom.innerText);
        };

        //向右滑动事件
        touch.swipeRight = function (dom) {
            alert(dom.innerText);
        }
    };

    function Touch(dom,range) {
        this.init = function () {
            var that = this;
            for(var i = 0; i<dom.length; i++){
                (function (dom) {
                    function touchstart(event) {
                        var e = event || window.event;
                        if(e.targetTouches.length === 1){
                            var startX = e.targetTouches[0].clientX,
                                startY = e.targetTouches[0].clientY;
                            function touchmove(e) {
                                var moveEndX = e.targetTouches[0].clientX,
                                    moveEndY = e.targetTouches[0].clientY;
                                if((that.getAngle(startX,startY,moveEndX,moveEndY) >= 135 || that.getAngle(startX,startY,moveEndX,moveEndY) <= -135) && that.getRange(startX,startY,moveEndX,moveEndY) >= range){
                                    that.swipeLeft(dom);
                                    dom.removeEventListener("touchmove",touchmove);
                                }else if((that.getAngle(startX,startY,moveEndX,moveEndY) >= -45 && that.getAngle(startX,startY,moveEndX,moveEndY) <= 45)&& that.getRange(startX,startY,moveEndX,moveEndY) >= range){
                                    that.swipeRight(dom);
                                    dom.removeEventListener("touchmove",touchmove);
                                }
                            }

                            function touchend() {
                                dom.removeEventListener("touchend",touchend);
                                dom.removeEventListener("touchmove",touchmove);
                            }

                            dom.addEventListener("touchmove",touchmove);
                            dom.addEventListener("touchend",touchend);
                        }
                    }

                    dom.addEventListener("touchstart",touchstart);
                })(dom[i]);
            }

            return this;
        };

        //计算滑动的角度
        this.getAngle = function (px1, py1, px2, py2) {
            //两点的x、y值
            x = px2-px1;
            y = py2-py1;
            hypotenuse = Math.sqrt(Math.pow(x, 2)+Math.pow(y, 2));
            //斜边长度
            cos = x/hypotenuse;
            radian = Math.acos(cos);
            //求出弧度
            angle = 180/(Math.PI/radian);
            //用弧度算出角度
            if (y<0) {
                angle = -angle;
            } else if ((y == 0) && (x<0)) {
                angle = 180;
            }
            return angle;
        };

        //计算两点之间的距离
        this.getRange = function (px1,py1,px2,py2) {
            return Math.sqrt(Math.pow(Math.abs(px1 - px2), 2) + Math.pow(Math.abs(py1 - py2), 2));
        };

        this.swipeLeft = function (dom) {};

        this.swipeRight = function (dom) {}
    }

</script>
</html>

需要修改的都在window.onload里面

使用：

首先实例化对象，将需要触发dom数组传入，第二个值是手指头滑动多长的距离触发事件

var touch = new Touch(dom,80).init();

然后给touch赋值左划和右划事件

        //向左滑动触发事件
        touch.swipeLeft = function (dom) {
            alert(dom.innerText);
        };

        //向右滑动事件
        touch.swipeRight = function (dom) {
            alert(dom.innerText);
        }

dom就是触发事件的单个的dom对象，这里直接弹出了一个dom的内容，具体还是测试吧