扶桑大红花
扶桑大红花
  • 发布:2018-09-19 17:30
  • 更新:2019-08-30 11:20
  • 阅读:8730

mui 监听左右滑动事件

分类:MUI

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

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

2018-09-19 17:30 负责人:无 分享
已邀请:
WuHen

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

2***@qq.com - 750865

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

			alert('像右滑动')  

		});  

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

			alert('像左滑动')  

		});
Euler

Euler

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

Euler

Euler

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

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