touch事件兼容性处理

DandJ 发布于2019-08-21 17:57 / 881人阅读

摘要：而当滑动角度在其他区域的时候就默认是左右滑动，这个时候就要阻止浏览器的默认事件。这样处理用户的体验会好很多。当然那个的比例也可以自行调整，我这里就以角度为界限。

在用图表插件的时候默认图表区域可以正常左右滑动，但是测试的时候发现在有些安卓机型上滑动不是特别流畅，经过一系列排查发现是默认的滚动事件影响到了，于是在touch事件里面阻止了浏览器默认事件：

e.preventDefault();

但是新的问题又产生了，阻止了默认事件后，没法在图表区域上下滑动来滚动页面，在对于小屏幕的用户体验非常差，可能图表区域就占了3/2屏幕，就根本没法进行页面的滚动。于是乎找了新的方法，先上最后解决这个bug的代码：

$("#selector").bind("touchstart",function(e){
    var point = e.touches ? e.touches[0] : e;
    $("#selector").attr("pointX", point.pageX);
    $("#selector").attr("pointY", point.pageY);

});

$("#selector").bind("touchmove",function(e){
    var point= e.touches ? e.touches[0] : e;
    var deltaX= point.pageX -$("#selector").attr("pointX");
    var deltaY= point.pageY -$("#selector").attr("pointY");        
    if( deltaY && Math.abs(deltaY / deltaX) > 1.5){
        return;
    }
    else{
        event.preventDefault();
    }                
});

代码的原理就是在点击的时候通过pageX和pageY属性来获取点击位置的x,y轴坐标，当滑动的时候再次获取x,y轴坐标，通过将deltaY / deltaX得到的值与界限值1.5进行对比，如图：

当起始点为（0，0），滑动的角度在蓝色阴影区域的时候就默认是上下滑动，这个时候就不做处理，触发默认的浏览器事件。而当滑动角度在其他区域的时候就默认是左右滑动，这个时候就要阻止浏览器的默认事件。这样处理用户的体验会好很多。

当然那个1.5的比例也可以自行调整，我这里就以tan3/2角度为界限。

云服务器 GPU云服务器 touch事件事件处理程序待处理事件多个事件处理

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/90265.html

《每周一点canvas动画》——用户交互

摘要：那么既然有添加事件，就有移除事件，使用方式与添加事件几乎完全一样事件类型事件执行函数可选，为布尔值表示在冒泡捕获阶段执行唯一需要注意的是即移除事件的函数，这里只能写函数名，而不能像添加事件一样将整个功能函数全部写入。用户交互也许是我们学习canvas动画中首先需要掌握的部分。毕竟，如果没有交互或者向动画中做一些动态的输入，那么这跟看电影有什么区别呢？用户交互基于事件，一般来说包括：鼠...

lieeps 2019-08-19 18:03 评论0 收藏0
《每周一点canvas动画》——用户交互

摘要：那么既然有添加事件，就有移除事件，使用方式与添加事件几乎完全一样事件类型事件执行函数可选，为布尔值表示在冒泡捕获阶段执行唯一需要注意的是即移除事件的函数，这里只能写函数名，而不能像添加事件一样将整个功能函数全部写入。用户交互也许是我们学习canvas动画中首先需要掌握的部分。毕竟，如果没有交互或者向动画中做一些动态的输入，那么这跟看电影有什么区别呢？用户交互基于事件，一般来说包括：鼠...

henry14 2019-08-01 15:11 评论0 收藏0
“click延时”是怎么来的与自定义tap事件解决“点透”

摘要：早期版本的的就是如此处理的，自定义事件在中触发，解决单击延时的问题。给按钮绑定事件事件执行自定义事件触发上的事件当然实际中肯定要放在其他的事件回调中，不然没办法响应用户操作。 click延时在移动设备上按下手指单击，按先后顺序，依次会发生touchstart->-touchmove（如果有的话）>touchend->mousedown->mousemove（如果有的话）->mouse...

kid143 2019-08-20 14:48 评论0 收藏0