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

Posted 2020-08-28 这个男人来自三体

在 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();
});