mui 监听左右滑动事件

分类：MUI

滑动

document.addEventListener("swiperight", function() {
alert(11111)
});

向左滑动可以监听到，为什么向右滑动监听不到，困扰好久了

2018-09-19 17:30 负责人:无分享

4 个回复

WuHen

我也左滑可以监听，右滑不能监听，请问解决了吗

扶桑大红花 (作者)

已解决。

//监控滑动手势

var startx, starty;

//获得角度

function getAngle(angx, angy) {

return Math.atan2(angy, angx) * 180 / Math.PI;

};

        //根据起点终点返回方向 1向上 2向下 3向左 4向右 0未滑动  

        function getDirection(startx, starty, endx, endy) {  

            var angx = endx - startx;  

            var angy = endy - starty;  

            var result = 0;  



            //如果滑动距离太短  

            if(Math.abs(angx) < 2 && Math.abs(angy) < 2) {  

                return result;  

            }  



            var angle = getAngle(angx, angy);  

            if(angle >= -135 && angle <= -45) {  

                result = 1;  

            } else if(angle > 45 && angle < 135) {  

                result = 2;  

            } else if((angle >= 135 && angle <= 180) || (angle >= -180 && angle < -135)) {  

                result = 3;  

            } else if(angle >= -45 && angle <= 45) {  

                result = 4;  

            }  



            return result;  

        }  

        //手指接触屏幕  

        document.addEventListener("touchstart", function(e) {  

            startx = e.touches[0].pageX;  

            starty = e.touches[0].pageY;  

        }, false);  

        //手指离开屏幕  

        document.addEventListener("touchend", function(e) {  

            var endx, endy;  

            endx = e.changedTouches[0].pageX;  

            endy = e.changedTouches[0].pageY;  

            var direction = getDirection(startx, starty, endx, endy);  

            switch(direction) {  

                case 0:  

                                            alert("未滑动！");  

                    break;  

                case 1:  

                                            alert("向上！");  

                    break;  

                case 2:  

                                            alert("向下！");  

                    break;  

                case 3:  

                                            alert("向左！");  

                    break;  

                case 4:  

                                            alert("向右！");  

                    break;  

                default:  

            }  

        }, false);

2018-09-26 14:08

2***@qq.com - 750865

//监听向右滑动
document.addEventListener("swipeleft", function() {

            alert('像右滑动')  

        });  

        //监听向左滑动  
        document.addEventListener("swiperight", function() {  

            alert('像左滑动')  

        });

Euler

针对你这个问题，不考虑其他问题的前提。
对方向敏感的话，swiperight改成swipeleft，可以监听左滑。（在发现用swiperight只能右滑，对'right'敏感的话应该能想到'left'，并且测试它的可行性）
document.addEventListener("swipeleft", function() {
console.log('222');
});

Euler

我去百度了一下swiperight（JQ也是可以的），我用来监听轮播图手动左右滑动。
$("img").on("swiperight",function(){
console.log('11111');
});
$("img").on("swipeleft",function(){
console.log('22222');
});

该问题目前已经被锁定, 无法添加新回复

mui 监听左右滑动事件

4 个回复

公告

相关问题

mui 监听左右滑动事件

与内容相关的链接

4 个回复

公告

相关问题