移动端事件常见问题

1、不用on方式绑定事件,而用addEventListener方式绑定事件。

移动端开发的时候,浏览器的模拟器时好时坏,一般选用后者绑定事件。

2、pc上的事件比移动端略慢,约3000ms。

例如:mouseup比touchend慢

3、移动端的点透

当上层元素发生点击的时候,下层元素也有点击(焦点)特性。在点击后300ms之内,如果上层元素消失或者隐藏,目标点就会“漂移”到下层元素身上,就会触发下层元素的点击行为。

解决:
1)下层不要使用有点击click(焦点)特性的元素。
2)阻止pc默认事件。建议给下层元素绑定移动端事件,尽量不用pc事件。

document.addEventListener('touchstart',function(ev){
    ev.preventDefault();
});

4、IOS10下设置meta禁止缩放不可行问题。

解决:阻止pc默认事件以禁止IOS10下用户缩放。

document.addEventListener('touchstart',function(ev){
    ev.preventDefault();
});

5、IOS10下溢出隐藏问题。

解决:阻止pc默认事件。

6、禁止系统的默认滚动条。

解决:阻止pc默认事件。

7、禁止系统的橡皮筋效果。

解决:阻止pc默认事件。

8、禁止长按选中文字、选中图片、系统默认菜单。

解决:阻止pc默认事件。

9、阻止pc默认事件会阻止文本框等元素获取焦点。

解决:阻止需要获取焦点的元素冒泡,即可正常获取焦点。

<input type="text"  id="txt"/>
var oTxt=document.getElementById('txt');
oTxt.addEventListener('touchstart',function(ev){
    ev.stopPropagation();//阻止需要获取焦点的元素text冒泡。
});
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容