通过阻止 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();
});
时间: 2024-08-22 13:22:28

通过阻止 touchstart 事件,解决移动端的 BUG的相关文章

阻止冒泡事件 解决方法2

在进行点击事件时,判断一下,所点的对象(e.target)是否是父级元素(可以判断是否含有父级元素的特有class),如果是,则执行第一层的点击事件. 举个栗子: HTML: <div id="clickme">click me</div> <div id="bg" class="bg"> <div id="inner"> <h2>content area</h

如何解决 touchstart 事件与 click 事件的冲突

一 · 业务场景的描述 在对已完成的PC站点进行移动端适配时,我们想要站点在移动设备上有更快的响应速度,以带给用户更好的体验,此时,我们应该使用移动设备专用的事件系统,例如,使用 touchstart 事件代替 click 事件. 为什么这样效果会更好呢?根据Google开发者文档中的描述: mobile browsers will wait approximately 300ms from the time that you tap the button to fire the click e

fastclick.js解决移动端(ipad)点击事件反应慢问题

参考http://blog.csdn.net/xjun0812/article/details/64919063 http://www.jianshu.com/p/16d3e4f9b2a9 问题的发现 上班做项目的时候碰到一个移动端项目,其中有个小游戏,相当于天上掉馅饼,用户需要点击馅饼获得.游戏做好之后在pc端测试是没问题的,安卓手机上测试也是没问题的,但是部分苹果手机就出现了问题,用户点击馅饼没有反应. 后来调试的时候,我让这些馅饼静止在屏幕上,这些苹果手机用户就可以点击了.才发现是因为点击

解决移动端页面滚动后不触发touchend事件

解决移动端页面滚动后不触发touchend事件 问题 在移动端页面进行优化时,一般使用touch事件替代鼠标相关事件.用的较多的是使用touchend事件替代PC端的click和mouseup事件. 可是,touchend事件在页面滚动时有个问题.在滚动完毕后,假设当前触点的位置所指的元素绑定了touchend事件,这时便会触发该元素的touchend事件,造成误操作. 解决方法 解决方法非常easy.就是在页面滚动时停止touchend事件冒泡.这样就能够防止触发touchend事件. 用法

解决移动端遮罩层无法覆盖全部页面问题

今天在做移动端项目的时候遇到遮罩层效果,按照以往的PC端我直接给同级遮罩层100%  给完之后测试看似完美但... 这就尴尬了.... 之后查阅了相关资料得知这里有个方法可以解决这个问题那就是“禁止全局滚动” 里面用的touch事件可参考 HTML5移动端触摸事件 document.addEventListaner('touchmove',stopTouchMove,false); //当手在屏幕上移动的时候执行stopTouchMove函数(阻止默认事件) //这个可以用在当遮罩层弹出的话执行

点击tr实现选择checkbox功能,点击checkobx的时候阻止冒泡事件, jquery给checkbox添加checked属性或去掉checked属性不能使checkobx改变状态

给tr添加点击事件,使用find方法查找tr下的所有层级的元素,children只查找下一层级的元素,所以使用find.find的返回值为jquery对象,在这个项目中不知道为什么使用jquery给checkbox添加checked属性或去掉checked属性不能使checkobx改变状态,所以我就把jquery对象转换为DOM对象,怎么转呢?jquery对象[0]或者get(0)就转换成DOM对象,然后直接.checked返回true或false就可以判断checkbox是否选中了.然后判断状

阻止jQuery事件冒泡

Query对DOM的事件触发具有冒泡特性.有时利用这一特性可以减少重复代码,但有时候我们又不希望事件冒泡.这个时候就要阻止 jQuery.Event冒泡. 在jQuery.Event 的文档 中的开头得知,jQuery.Event对象是符合W3C标准的一个事件对象,同时jQuery.Event免去了检查兼容IE的步骤. jQuery.Event提供了一个非常简单的方法来阻止事件冒泡:event.stopPropagation(); Js代码   $("p").click(functio

HTML 5 Audio/Video DOM canplaythrough 事件在移动端遇到的坑

canplaythrough 事件定义和用法 当浏览器预计能够在不停下来进行缓冲的情况下持续播放指定的音频/视频时,会发生 canplaythrough 事件. 当音频/视频处于加载过程中时,会依次发生以下事件: loadstart durationchange loadedmetadata loadeddata progress canplay canplaythrough 浏览器支持 所有主流浏览器都支持 canplaythrough 事件. 注释:Internet Explorer 8 或

阻止浏览器事件传递

阻止jQuery事件冒泡 jQuery对DOM的事件触发具有冒泡特性.有时利用这一特性可以减少重复代码,但有时候我们又不希望事件冒泡.这个时候就要阻止 jQuery.Event冒泡. 在jQuery.Event 的文档 中的开头得知,jQuery.Event对象是符合W3C标准的一个事件对象,同时jQuery.Event免去了检查兼容IE的步骤. jQuery.Event提供了一个非常简单的方法来阻止事件冒泡:event.stopPropagation(); $("p").click(