您的位置:首页 > 移动开发

通过阻止 touchstart 事件,解决移动端的 BUG

2017-01-22 17:03 344 查看
在 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();
});
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: