通过阻止 touchstart 事件,解决移动端的 BUG
在 iOS10 下,即使设置了 meta 标签的 user-scalable=no 依然不能阻止用户缩放。
解决此 BUG 的方法是阻止 PC 事件:
document.addEventListener('touchstart', function(ev) {
ev.preventDefault();
});
另外,此方法还能解决 iOS10 中横向页面溢出,即使给 body 设置了 overflow:hidden 依然能横向滑动的问题。
不过添加了此事件后会阻止 iOS10 的橡皮筋效果,另外也会禁止文字选中功能。
通过阻止 touchstart 的默认事件来解决此 BUG,另外阻止此默认事件还可以解决 300ms 延迟的 BUG。
当然,由于阻止了默认行为,那么 a 标签链接的默认跳转页就无法实现了,只能通过手动添加事件:
aDom.addEventListener('touchstart', function(ev) {
window.location.href = "www.tirion.me";
});
输入框获取焦点也需要手动解决:
inputDom.addEventListener('touchstart', function(ev) {
ev.stopPropagation();
});
通过阻止 touchstart 事件,解决移动端的 BUG的更多相关文章
- h5 移动端在阻止touchstart的默认事件时报错
h5 移动端在阻止touchstart的默认事件时报错 解决办法, 可以添加 *{ touch-action: none;}即可消除错误
- 如何解决 touchstart 事件与 click 事件的冲突
一 · 业务场景的描述 在对已完成的PC站点进行移动端适配时,我们想要站点在移动设备上有更快的响应速度,以带给用户更好的体验,此时,我们应该使用移动设备专用的事件系统,例如,使用 touchstart ...
- fastclick.js解决移动端(ipad)点击事件反应慢问题
参考http://blog.csdn.net/xjun0812/article/details/64919063 http://www.jianshu.com/p/16d3e4f9b2a9 问题的发现 ...
- 解决移动端页面滚动后不触发touchend事件
解决移动端页面滚动后不触发touchend事件 问题 在移动端页面进行优化时,一般使用touch事件替代鼠标相关事件.用的较多的是使用touchend事件替代PC端的click和mouseup事件. ...
- Touch事件在移动端web开发中的详解
一.pc端事件回顾 HTML事件.DOM0事件.DOM2事件 事件对象. 如果上述概念不清楚,请先去了解. 二.移动端事件简介 2.1 pc端事件在移动端的问题 移动设备主要特点是不配备鼠标,键盘 ...
- 解决移动端真机不能下拉滚动bug
在近期的移动端开发中,发现浏览器中调试可以正常滚动,而在真机中却不能滚动了,这是为什么呢??? 总结了一下主要有一下两方面:css的设置和js的设置 1.之前有设置css的原因,下面分先说css的问题 ...
- 重载jquery on方法实现click事件在移动端的快速响应
额,这个标题取的还真是挺装的... 其实我想表达的是jquery click事件如何在移动端自动转换成touchstart事件. 因为移动端click事件会比touchstart事件慢几拍 移动设备某 ...
- 安卓4.4不支持touchend事件解决办法
最近的项目要求兼容到OPPO A31这款手机,这款手机是安卓4.4,调试时遇到了touch手指不能滑动页面切换的问题,最终解决通过在touchstart事件里面加上一个 event.preventDe ...
- tap,touch,touchstart,事件与click事件的区别
根据源码所见, 移动端为了将将单击事件更加灵敏,所以现在的JQM,ST...框架都将JS单击事件封装成tap,或者touch或者touchstart事件, 其实现本质是将click触发多次,以打成移动 ...
随机推荐
- outline: none;
outline: none:用在去掉某个选中后显示的外边框,(追求细节) http://www.w3school.com.cn/cssref/pr_outline.asp
- day06 元组类型
一.什么是元组? 元组就是一个不可变的列表 元组的基本使用: 1.用途: 用于存放多个值,当存放多个任意类型的值 2.定义方式:在()内用逗号分隔开多个任意类型的值 t=(1,3.1,'aaa',( ...
- JAVA支付宝和微信(APP支付,提现,退款)
公共参数图表: 接口 需要参数 通知方式 支付宝APP支付 应用公钥,应用私钥 异步 支付宝APP提现 应用公钥,应用私钥,支付宝公钥 同步 支付宝APP退款 应用公钥,应用私钥,支付宝公 ...
- 【资料搜集】Python学习
python学习手册 | 演道网 http://dev.go2live.cn/python/python%e5%ad%a6%e4%b9%a0%e6%89%8b%e5%86%8c.html
- Netty完成网络通信(二)
Netty是基于NIO的框架,完善了NIO的一些缺陷,因此可以用Netty替代NIO Netty实现通信步骤: 1.创建两个NIO线程组,一个专门用于网络事件处理(接受客户端的连接),另一个则进行网络 ...
- asp.net MVC之Result过滤器浅析
在asp.net MVC中,每一个Action方法完成之后都会返回一个结果,而我们可以在Result过滤器中根据需要修改这个结果.例如可以根据UserAgent来判断客户端的来源是手机还是PC端,从而 ...
- 2.19 C++友元函数和友元类
参考: http://www.weixueyuan.net/view/6350.html 总结: 借助friend关键字将其声明为友元函数,结果,在display函数体内,我们就能访问private属 ...
- 一个灵活的AssetBundle打包工具
尼尔:机械纪元 上周介绍了Unity项目中的资源配置,今天和大家分享一个AssetBundle打包工具.相信从事Unity开发或多或少都了解过AssetBundle,但简单的接口以及众多的细碎问题 ...
- L253 Valentine's Day
Are you ready for Valentine's Day, my fellow stargazers? Not sure if you know this, but the astrolog ...
- nginx——绑定 Nginx 进程到不同的 CPU 上
为什么要绑定 Nginx 进程到不同的 CPU 上 :默认情况下,Nginx 的多个进程有可能跑在某一个 CPU 或 CPU 的某一核上,导致 Nginx 进程使用硬件的资源不均,因此绑定 Nginx ...