移动端开发踩坑日记——安卓4.4.2不触发touchend事件

背景:最近在公司开发一个景区人流量卡片
要求:卡片类似轮播图,可以左右滑动查看不同的数据
问题:在低端安卓机左右滑动无响应(安卓4.4.2)
解决过程:
1.确定问题所在:我首先考虑到的但是性能问题,由于在touchmove事件中的处里函数非常浪费 性能,所以我再touchmove事件的处里函数里面进行了节流,问题还是没有解决,不但没有解决反而其他的高端机型也变得非常卡顿。然后我又考虑是不支持touch事件,而后我再每一个事件的处里函数中添加alert();语句,测试结果touchend事件没有触发。
2.解决问题:网上查资料可知是浏览器的默认行为阻止了touchend事件的触发。但是阻止默认行为后又有新的问题,就上下滚动也失效了,进一步解决,请看注释部分。

day.on("touchmove",function(event){
    var touch = event.touches[0];
    endPosition = {
        x: touch.clientX
    }
    deltaX = endPosition.x - startPosition.x;
    var distance = deltaX+(-data.indexDay*(dayBoxWidth+15));
    animate(distance);
    if (Math.abs(deltaX) > 5) { // 滚动距离大于5
        event.preventDefault();
    }
    
});

问题的深入:
1.touch事件?

touchstart事件:当手指触摸屏幕的时候触发, 及时 有一个手指放在屏幕上也会触发;
touchmove事件:当手指在屏幕上滑动的时候触发,是一个持续的过程,在触发事件的过程中 可以调用preventDefult()方法阻止滚动;
touchend事件: 当手指从屏幕上移开的时候触发;
touchcancel事件:当系统停止跟踪触摸的时候触发, 比如 来电话 或者短信 或者其他的提醒的时候 会打断touchmove事件;
单击时的触发顺序:touchstart -> touchmove -> touchend;
滑动时的触发顺序:touchstart -> touchmove -> touchmove -> ....... ->touchmove ->touchend;

2.安卓4.0的touch事件的触发过程

单击时的触发顺序:touchstart -> touchmove -> touchend;
滑动时的触发顺序:touchstart -> touchmove -> touchcancel;

3.为什么要阻止浏览器默认行为

考虑性能问题,安卓4.0的浏览器只允许触发一次用户自定的touchmove的事件处理函数,如果多次触发就会触发浏览器的默认行为,直接触发touchcancel事件。所以在touchmove的处里函数中阻止默认行为就能解决这个问题。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值