touch事件兼容性处理

2020-05-07 10:05:45 阅读：316 来源： 互联网

标签：touches 兼容性 point deltaY 默认 selector 事件 touch 滑动

在用图表插件的时候默认图表区域可以正常左右滑动，但是测试的时候发现在有些安卓机型上滑动不是特别流畅，经过一系列排查发现是默认的滚动事件影响到了，于是在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角度为界限。

标签：touches,兼容性,point,deltaY,默认,selector,事件,touch,滑动
来源： https://www.cnblogs.com/baimeishaoxia/p/12841085.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

touch事件兼容性处理