click和touchmove vue_移动端touch事件影响click事件以及在touchmove添加preventDefault导致页面无法滚动的解决方法...
这两天自己在写一个手机网页,用到了触屏滑动的特效,就是往右滑动的时候左侧隐藏的菜单从左边划出来。
做完之后在手机原生浏览器中运行正常,但在QQ和微信中打开,发现touchmove只会触发一次,而且touchend也经常不触发。
之后百度了一下这个问题,原因是
主要是由于200ms超时导致内核不一定会一直处理touchmove事件,一旦超时会将后续所有的事件转交给UI处理,导致touchmove不会一直触发。
为了解决开发者需要,建议开发者在touchstart时调用event.preventDefault,这样就可以保证内核会一起触发touchmove事件了。
根据上面所说,在touchstart中添加了event.preventDefault()方法,在QQ和微信中果然正常了。
但是!!!页面中的超链接点击没反应了!!!给其他地方加的click事件也不触发了!!!
之后继续百度,得知当在移动端上点击屏幕时,会依次触发touchstart,touchmove,touchend,click事件。
之后测试了一下,发现正确的触发过程应该是:touchstart→touchmove→touchend或者touchstart→touchend→click。
如果在点击屏幕的时候手指滑动的话,是不会触发click事件的。
上面说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()方法,最好加上方向判断,当然如果你页面内容不需要滚动条就不需要加判断了。
click和touchmove vue_移动端touch事件影响click事件以及在touchmove添加preventDefault导致页面无法滚动的解决方法...相关推荐
- 移动端和PC端弹出遮罩层后,页面禁止滚动的解决方法及探究
移动端和PC端弹出遮罩层后,页面禁止滚动的解决方法及探究 参考文章: (1)移动端和PC端弹出遮罩层后,页面禁止滚动的解决方法及探究 (2)https://www.cnblogs.com/ranyon ...
- 在移动端设置overflow:hidden禁止滚动的解决方法
在移动端设置overflow:hidden禁止滚动的解决方法 参考文章: (1)在移动端设置overflow:hidden禁止滚动的解决方法 (2)https://www.cnblogs.com/ko ...
- 微信电脑端-退出的群、删除的人,仍然可以查找或看到问题的解决方法
微信电脑端-退出的群.删除的人,仍然可以查找或看到问题的解决方法 我们经常会发现退了的群,还一打关键字会弹出来候选,即使清空聊天记录也不行.这是由于本地缓存了旧数据导致的. 电脑端解决办法: 1. 退 ...
- 【JS教程】移动端 Touch(触摸)事件
一.pc端事件在移动端的问题 移动设备主要特点是不配备鼠标,键盘也只是在需要输入的地方才会激活虚拟键盘.所以以前的pc端事件在移动端使用起来就没有那么好用,虽然部分仍然可以使用. 1. click事件 ...
- 移动端有时候触发不了touchend 使用event.preventDefault()后页面无法滚动
使用移动端设备监听手指触摸事件时发现有时候无法触发touchend事件,因此在监听touchend事件时通过 阻止页面默认事件 event.preventDefault()来实现事件监听,但是发现页面 ...
- ios10 safari浏览器 在touchmove 里面写e.preventDefault(); 不起作用 的解决方法
ios10 safari浏览器 在touchmove 里面写e.preventDefault(); 不起作用 的解决方法 参考文章: (1)ios10 safari浏览器 在touchmove 里面写 ...
- vue @touchmove 会导致页面跟着滚动
<div @touchmove.stop.prevent="to_do">内容</div>
- 移动端touch事件和click事件的区别
移动端touch事件和click事件的区别 1.touch事件 以下是四种touch事件 touchstart: //手指放到屏幕上时触发 touchmove: //手指在屏幕上滑动 ...
- 移动端touch事件 touchstart、touchmove、touchend
移动端touch事件 touchstart.touchmove.touchend touchstart事件:当手指触摸屏幕时候触发,即使已经有一个手指放在屏幕上也会触发.touchmove事件:当手指 ...
最新文章
- Scala Spark Streaming + Kafka + Zookeeper完成数据的发布和消费
- Go 语言的%d,%p,%v等占位符的使用
- 【渝粤题库】陕西师范大学202831 程序设计 作业(专升本)
- 我一直在想500年前我是不是孙悟空,但是事实上我却是至尊宝。这就是宿命(capsicum.heorhome.net)
- java中的比较运算符_Java基础---Java中的比较运算符(十三)
- web_01Java ee实现登陆注册功能
- 什么才是真正的价值?
- 使用latex分割与合成PDF
- 01-Mybatis持久层框架快速入门(环境搭建、xml配置文件、注解)
- html炫酷特效代码博客,HTML特效代码!
- 【4G通讯模组相关】 TCPIP连接本地电脑测试 、内网穿透
- Delphi IdHTTP1下载文件防止假死 ( - 大悟还俗
- 自学软件测试需要多久?能掌握吗?
- URL Schemes 的发展
- 苹果App Store公布最新应用审核标准:更加严格
- 毕业设计-基于效果的图像超级分辨率重建
- JAVA incept_java 过滤器(Filter)与springMVC 拦截器(interceptor)的实现案例
- 数据库原理课后答案 第六章
- Web前端期末大作业---响应式美女健身教练瑜伽馆网页设计(HTML+CSS+JavaScript+)实现
- BrandTech如何提高种草爆文率?
热门文章
- python abs(3+4j)_表达式 abs(3+4j) 的值为 ____________ 。_学小易找答案
- 微信第三方平台开发,component_verify_ticket的接收
- 火车头dede采集接口,图片加水印,远程图片本地化,远程无后缀的无图片本地化...
- U盘图标更改个性化工具
- 单片机学习笔记-数码管的显示
- 学习之旅-计算语言学工作者需要了解的数学知识
- JVM内存Dump原理与在线分析实战 | 得物技术
- poj3253求切割木板开销最少是多少, 赫夫曼编码
- AD那些事 切割板子形状,线的弧度转换
- 第十六章 - 垃圾回收相关概念