博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
touch事件兼容性处理
阅读量:6761 次
发布时间:2019-06-26

本文共 1003 字,大约阅读时间需要 3 分钟。

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

转载地址:http://ambeo.baihongyu.com/

你可能感兴趣的文章
某android平板项目开发笔记---计划任务备份
查看>>
SG-1000使用指南
查看>>
Linux_账户和组管理
查看>>
MSSql技巧之快速得到表的记录总数
查看>>
Office 2010 新特性 (一) 全局特性(1)
查看>>
Windows Phone 实用开发技巧(13):自定义Element Binding
查看>>
Puppet filebucket命令参数介绍(九)
查看>>
Hello World
查看>>
Python[8] :paramiko模块多进程批量管理主机
查看>>
时间与文件,信号的操作
查看>>
struts2的核心和工作原理
查看>>
使用StarWind构建Hyper-V Server群集实时迁移
查看>>
Linux下JDK和Tomcat安装
查看>>
Photoshop应该具有的功能
查看>>
zookeeper部署及集群测试
查看>>
kbmmw 中XML 操作入门
查看>>
【流数据与大屏DataV】如何使用DTS,Datahub,StreamCompute,RDS及DataV搭建流数据大屏...
查看>>
★古今中外著名14大悖论
查看>>
7.5. PUT
查看>>
使用kettle转换中的JavaScript对密码进行加密和解密
查看>>