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

来源：互联网发布：js访问器属性有什么用编辑：程序博客网时间：2024/05/24 13:28

<!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的内容，具体还是测试吧

0 0