ios10 safari浏览器 在touchmove 里面写e.preventDefault(); 不起作用 的解决方法

最新推荐文章于 2024-03-08 23:25:28 发布
最新推荐文章于 2024-03-08 23:25:28 发布
阅读量1.6k 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/alphafly/p/6006578.html
版权

  最近做手机端项目遇到一个问题，就是在ios10系统里面  safari浏览器 在touchmove 里面写e.preventDefault();不起作用 

更种google 还是没有找到解决方法

 

最后找到了一种解决方法，就是

 

 

 

 

 

 

 

 

 

 

 

 

等着苹果更新 下一版系统！哈哈哈哈哈  如果谁有好的解决方法，欢迎留言········

转载于:https://www.cnblogs.com/alphafly/p/6006578.html

weixin_30765319
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
针对 iOS端禁止列表顶部下拉和底部上拉露出浏览器灰色背景 的解决方案。
01-23
在iOS设备上，当用户在Web应用或者网页中进行滚动操作时，有时会发现列表顶部下拉或底部上拉会暴露浏览器的灰色背景，这在视觉体验上可能会显得不连贯，影响整体应用的美观度。针对这个问题，本文将提供一种解决方案...
iOS11.3以下modal中input光标错位的解决方法
08-26
iOS11.3以下modal中input光标错位的解决方法是指在iOS11.3以下的系统中，出现了input光标错位的问题，即在弹出层中输入框的光标位置不正确的问题。这个问题是由于iOS系统的BUG所导致的，幸运的是，在iOS11.3以后，这...
ios10 safari浏览器 在touchmove 里面写e.preventDefault()； 不起作用 的解决方法
p15097962069的博客
06-04 723
ios10 safari浏览器 在touchmove 里面写e.preventDefault(); 不起作用 的解决方法
【解决】addEventListener监听滚动与removeEventListener移除监听阻止冒泡（e.preventDefault()）不生效
huangfuyk.的博客
09-19 2176
注： 第三个参数passive默认值为false，但是chrome, Firefox等浏览器为了保证滚动时的性能，在Window,、Document、 Document.body上针对 touchstart 和 touchmove 事件将passive默认值改为了true。使用addEventListener监听滚动来阻止冒泡（e.preventDefault()），removeEventListener移除监听阻止冒泡（e.preventDefault()），但未生效。
触摸事件(touchstart、touchmove和touchend)
ssisse的博客
07-13 1597
HTML5中新添加了很多事件，但是由于他们的兼容问题不是很理想，应用实战性不是太强，所以在这里基本省略，咱们只分享应用广泛兼容不错的事件，日后随着兼容情况提升以后再陆续添加分享。今天为大家介绍的事件主要是触摸事件：touchstart、touchmove和touchend。 一开始触摸事件touchstart、touchmove和touchend是iOs版Safari浏览器为了向开发人员传达
ios-touch无效的解决办法
wj19880408的专栏
03-21 1332
touch 的方法中  - (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event 这个方法无效，原因可能是没有设置该view的交互  [view setUserInteractionEnabled:YES];
JavaScript中防止微信浏览器被整体拖动的方法
12-09
在微信浏览器中开发网页时，有时会出现用户在页面顶部或底部拖动时，导致整个浏览器窗口跟随拖动的情况，这会影响用户体验，特别是对于iPhone用户。为了解决这个问题，我们可以利用JavaScript事件监听器来控制页面的...
微信浏览器下拉黑边解决方案 wScroollFix
10-15
在微信浏览器中，用户在页面滚动到顶部或底部后继续滑动时，有时会出现下拉黑边的问题。这种黑边现象实际上是微信内置浏览器为保护用户安全而设计的，它会在页面下拉时显示当前页面的域名信息，防止钓鱼网站。然而，...
js写的触点滑动...
09-21
JavaScript（简称JS）是一种广泛用于Web开发的轻量级编程语言，它允许开发者在网页上实现动态内容，交互效果以及用户界面的优化。"js写的触点滑动"指的是使用JavaScript处理触摸事件，来实现移动端设备上的滑动操作...
【H5】H5安卓、ios兼容性问题
小墨鱼的前端问题录
07-19 3194
触摸事件的响应顺序为 touchstart --> touchmove --> touchend --> click,也可以通过绑定ontouchstart事件，加快对事件的响应，解决300ms延迟问题。input 的placeholder会出现文本位置偏上的情况：PC端设置line-height等于height能够对齐，而移动端仍然是偏上，解决是设置line-height：normal。CSS3中的calc变量在iOS6浏览器中必须加-webkit-前缀，目前的FF浏览器已经无需-moz-前缀。
IOS与Android的兼容
小P孩的博客
03-05 464
关于移动端的那些兼容 一. IOS与Android的兼容 1.关于touchstar,touchmove,touchend使用： 问题：在IOS上，使用以上方法，会调用起IOS系统自带的一些默认任务，会使页面整体滚动甚至退出程序 解决方案：使用 @touchstar.prevent 禁用苹果的默认方法， 为什么不使用e.preventDefault()? 因为这个方法在IOS移动端不生效 在android上， 没有上述问题 接下来的问题，我将在工作中一一补上！ 敬请期待 ...
H5移动端ios/Android兼容性总结
weixin_33875564的博客
06-01 1315
以前做pc端，也会遇到兼容性的问题，不过说实话，脑海里全是ie的问题，并没有什么可特别注意的，可能是我不善总结，现在做移动端（本来觉得移动端很easy，所以没放在眼里），so，我错了，我为自己的轻视高傲买单！ 最近就遇见了一些兼容性bug，从网上找了资料。我觉得值得一写的，我都有试过的内容。 先说一下viewport 先上模板 <...
关于e.preventDefault()方法
weixin_43821171的博客
09-22 7879
背景： 同事在项目中遇到的问题，在项目中导入了某一个组件作为根组件之后，发现原来的子组件中的滚动效果不再生效，因为是移动端的项目，所以这里的滚动效果是通过touchmove事件进行触发的，在对引入的组件进行研究后，发现是在根组件中阻止了touchmove事件的默认事件，也就是调用了e.preventDefault()方法，然后同事们通过阻止冒泡阻止了这个方法的调用，解决掉了因为引入组件而带来的问题，但这却引发了一连串的有关于preventDefault()这个方法的思考。 问题： 为什么我在父组件上使用pr
jquery easyui 中e.preventDefault()不生效
weixin_43896145的博客
05-23 318
描述： 在弹框内，input输入框按下enter回车键，希望得到与点击search按钮一样的效果，结果按下enter之后，表单直接提交了。所以需要阻止这种默认行为。执行以上代码，发现并没有生效。
手机浏览器contextmenu设置e.preventDefault()无效
最新发布
海天鹰
03-08 271
监听 contextmenu 设置 e.preventDefault() 阻止默认右键菜单弹出，在PC端有效，在手机浏览器无效。因为手机浏览器弹出菜单是 touch 触发的。
禁止Safari 页面滚动问题（event.preventDefault无效的问题）
GrimRaider的专栏
07-04 2111
1.设置监听（addEventListener）的对象不是你要preventDefault的对象，我就是这种情况，使用全局document.addEventListener，产生滚动的是body下的一个子。 2.event.cancelable为false，则event.preventDefault无效。 参考： http://www.w3school.com.cn/jsref/event_...
js中的常见兼容问题
Queen_sq的博客
11-17 244
1.阻止浏览器的默认行为的兼容写法： function stopDefault(e){ if(e.preventDefault){ e.preventDefault(); }else{ e.returnValue = false;//IE浏览器 } } //备注：e代表事件对象 还可以直接写一个return false;最好写在最后一行。...
解决IOS橡皮筋效果
Ming__cj的博客
03-26 438
1
JavaScript 在使用了e.preventDefault(); 如何让移动端浏览器可以正常上下滑动
04-26
当使用了 e.preventDefault() 后，禁止了默认的滑动事件。如果想要在移动端浏览器中正常上下滑动，可以使用 touchstart 和 touchmove 事件来模拟滑动事件，并改变元素的 scrollTop 属性。具体的代码实现可以类似这样： ``` var ele = document.getElementById('app'); var startY = 0; var moveY = 0; var deltaY = 0; ele.addEventListener('touchstart', function(e) { startY = e.touches[0].pageY; moveY = 0; deltaY = 0; }); ele.addEventListener('touchmove', function(e) { moveY = e.touches[0].pageY; deltaY = moveY - startY; // 如果滚动到了容器的顶部，并且向下滑动，就让浏览器滚动 if (ele.scrollTop === 0 && deltaY > 0) { e.preventDefault(); } // 如果滚动到了容器的底部，并且向上滑动，也让浏览器滚动 if (ele.scrollTop === ele.scrollHeight - ele.offsetHeight && deltaY < 0) { e.preventDefault(); } ele.scrollTop -= deltaY; }); ``` 这段代码监听了 touchstart 和 touchmove 事件来模拟滑动。当向上滑动的时候，元素的 scrollTop 属性减去 deltaY，从而模拟向上滑动的效果。当滑到容器的顶部或者底部的时候，就让浏览器处理滑动事件。这样就可以让移动端浏览器正常上下滑动了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值