移动端touch事件影响click事件以及在touchmove添加preventDefault导致页面无法滚动的解决方法
这两天自己在写一个手机网页,用到了触屏滑动的特效,就是往右滑动的时候左侧隐藏的菜单从左边划出来。
做完之后在手机原生浏览器中运行正常,但在QQ和微信中打开,发现touchmove只会触发一次,而且touchend也经常不触发。
之后百度了一下这个问题,原因是
主要是由于200ms超时导致内核不一定会一直处理touchmove事件,一旦超时会将后续所有的事件转交给UI处理,导致touchmove不会一直触发。
为了解决开发者需要,建议开发者在touchstart时调用event.preventDefault,这样就可以保证内核会一起触发touchmove事件了。
地址:http://bbs.mb.qq.com/thread-201794-1-1.html
根据上面所说,在touchstart中添加了event.preventDefault()方法,在QQ和微信中果然正常了。
但是!!!页面中的超链接点击没反应了!!!给其他地方加的click事件也不触发了!!!
之后继续百度,得知当在移动端上点击屏幕时,会依次触发touchstart,touchmove,touchend,click事件。
之后测试了一下,发现正确的触发过程应该是:touchstart→touchmove→touchend或者touchstart→touchend→click。
如果在点击屏幕的时候手指滑动的话,是不会触发click事件的。
参考地址:http://www.tuicool.com/articles/3QZ7jeV
上面说event.preventDefault()的方法,会阻止事件的默认行为。可以通过调用preventDefault()方法,可以阻止后面事件的触发。
我知道event.preventDefault()会阻止a标签默认的动作(跳转到href指定的页面),但是为什么click也不触发了呢?
之后我大胆推测了一下:
会不会是因为在移动端click事件的触发条件就是必须touchstart和touchend同时触发才能触发click呢?
我在touchstart中调用了event.preventDefault方法,是不是让浏览器误以为没有触发touchstart事件,只触发了touchend事件,所以没有触发click事件呢?
之后我删除了touchstart中的event.preventDefault方法,果然超链接和click事件都触发了,但是前面说的问题又出现了,在QQ和微信中touchmove和touchend又出问题了。
怎么办呢?
后来突然脑袋灵光一闪,既然在touchstart中加了event.preventDefault会导致不触发click事件,那我在touchmove中加可以吧?
抱着试一试的心态,果然好了,click能顺利触发,QQ和微信中也没有问题,我以为这样就好了,但是为什么页面不能滚动了?
原来touchmove中添加event.preventDefault方法之后会阻止浏览器默认的滚动。。。
所以页面无法滚动了,之后又去找找找,找了很久一直没找到怎么解决这个问题,突然想起之后用的一个移动端的图片轮播插件,
为什么他们可以左右滑动,不影响click事件和a标签,也不影响页面的滚动。
然后我打开了这个插件的源码,终于在touchmove中找到了答案
在touchmove中有这样一段代码(下面是我自己抄过来简化过的):
var w = x<0?x*-1:x; //x轴的滑动值
var h = y<0?y*-1:y; //y轴的滑动值
if(w>h){ //如果是在x轴中滑动
event.preventDefault();
}
就是在touchmove中判断x轴和y轴的移动值,判断当前是往哪个方向滑动,如果是在x轴上滑动(左右),就调用event.preventDefault()方法,如果是在y轴上滑动(上下),就不调用event.preventDefault()。
然后测试一下,QQ和微信中特效没有问题,click事件和a标签链接也可以顺利触发,页面滚动也没有问题。
所有问题终于解决了。。
总结一下:
在QQ和微信(当然还包括其他浏览器,不过我没测试过)中如果有需要用到touch事件做的特效一定要在touchstart或者touchmove中添加event.preventDefault()方法。
在touchstart中如果有event.preventDefault()方法, 将不会触发click事件和a标签方法。在这里可以使用tap代替click,但是a标签的话就不太方便了。
如果在touchmove中有event.preventDefault()方法,最好加上方向判断,当然如果你页面内容不需要滚动条就不需要加判断了。
移动端touch事件影响click事件以及在touchmove添加preventDefault导致页面无法滚动的解决方法的更多相关文章
- 移动端和PC端弹出遮罩层后,页面禁止滚动的解决方法及探究
PC端解决方案 pc端的解决思路就是在弹出遮罩层的时候取消已经存在的滚动条,达到无法滚动的效果. 也就是说给body添加overflow:hidden属性即可,IE6.7下不会生效,需要给html增加 ...
- 移动端touch事件影响click事件的相关解决方法
preventDefault()的方法,阻止事件的默认行为. 在移动端,手指点击一个元素,会经过:touchstart --> touchmove -> touchend -->cl ...
- 移动端开发用touch事件还是click事件
前端开发现在包含了跨浏览器,跨平台(不同操作系统)和跨设备(不同尺寸的设备)开发. 在移动开发的过程中,到底选取touch事件还是click事件?对了,请不要鄙视click,click在移动端开发用着 ...
- 如何解决 touchstart 事件与 click 事件的冲突
一 · 业务场景的描述 在对已完成的PC站点进行移动端适配时,我们想要站点在移动设备上有更快的响应速度,以带给用户更好的体验,此时,我们应该使用移动设备专用的事件系统,例如,使用 touchstart ...
- 移动端touch拖动事件和click事件冲突问题解决
通过一个悬浮球交互功能的案例来阐述问题,以及解决办法. 实现效果 类似微信里的悬浮窗效果,苹果手机的悬浮球功能效果 可以点击拖动,然后吸附在窗口边缘 点击悬浮球,可以跳转界面,或者更改悬浮球的形态 准 ...
- tap,touch,touchstart,事件与click事件的区别
根据源码所见, 移动端为了将将单击事件更加灵敏,所以现在的JQM,ST...框架都将JS单击事件封装成tap,或者touch或者touchstart事件, 其实现本质是将click触发多次,以打成移动 ...
- 移动端touch触屏滑动事件、滑动触屏事件监听!
一.触摸事件 ontouchstart.ontouchmove.ontouchend.ontouchcancel 目前移动端浏览器均支持这4个触摸事件,包括IE.由于触屏也支持MouseEvent,因 ...
- onblur事件和click事件冲突
在js中onblur事件的优先级click事件,所以同一个元素上绑定两个事件的时候,onblur事件会冲掉click事件. 解决方案:将click事件改成mousedown事件
- touchstart 事件与 click 事件的冲突
const clickEvent = (function() { if ('ontouchstart' in document.documentElement === true) retu ...
随机推荐
- jquery筛选器
1.过滤 eq(index|-index) 获取当前链式操作中第N个jquery对象,正数从0开始,负数从-1开始. first 获取当前链式操作中第1个jquery对象 last 获取当前链式 ...
- 崽崽帮www.zaizaibang.com精选14
[行走贵州]爽爽贵阳,乐活天堂! 北京儿童医院将建遗传代谢病专科医院 [山东十大最难懂方言]原来青岛话还是很好懂滴 ❤如果南宁的儿童医院长这样…… 成都三所小学入围中国百强小学名单 [乐湖新闻]学习中 ...
- why happen "WaitHandles must be less than or equal to 64"
一.背景: 在一个项目中碰到大数据插入的问题,一次性插入20万条数据(SQL Server),并用200个线程去执行,计算需要花费多少时间,因此需要等200个线程处理完成后,记录花费的时间,需要考虑的 ...
- ios 写项目的时候遇到的问题及解决方案(3)
22.看了苹果的文档,里面有这一句话:All launch images must be PNG files and must reside in the top level of your appl ...
- Python入门3
字典 字典四种创建方法: 1. dic = dict() print(dic) # 相当于 dic1 = {} print(dic1) # 输出 {} {} 2. dic = dict(one=1, ...
- 短链(ShortURL)的Java实现
什么叫短链或短址? 就是把长的 URL 转成短的 URL, 现在提供这种服务的有很多公司,我们以google家的 URL shortener 服务: http://goo.gl/ 为例. 任何长网址都 ...
- mysql删造成表死锁研究
现在互联网公司对于代码的管理越来越规范,一般都会有3个环境:开发环境,测试环境,正式环境.在开发环境进行开发,开发完成后将代码提交到测试环境进行测试,测试完毕后上线到正式环境. 今天在正式环境上遇到一 ...
- javascript Date
转:http://blog.csdn.net/vbangle/article/details/5643091# // 对Date的扩展,将 Date 转化为指定格式的String // 月(M).日( ...
- Git使用培训
1.VS“扩展和更新”菜单,NuGet 2.通过“扩展和更新”,联机搜索git,安装“Git Extensions”和“Git Source Control Provider” 3.通过Git命令配置 ...
- JavaScript:彻底理解同步、异步和事件循环(Event Loop) (转)
原文出处:https://segmentfault.com/a/1190000004322358 一. 单线程 我们常说"JavaScript是单线程的". 所谓单线程,是指在JS ...