微信中body的touchmove事件(下拉显示网址)影响元素的touchmove事件的解决方法

最新推荐文章于 2024-01-31 11:31:24 发布
最新推荐文章于 2024-01-31 11:31:24 发布
阅读量2.5k 收藏
点赞数
分类专栏： Web前端 文章标签： 移动端开发 javascript 前端 touchmove
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jie_rookie/article/details/73835878
版权

1：保留微信的下拉显示网址----设置中间量，给body绑定touchmove事件，根据中间量的值来判定是否阻止浏览器的默认行为；当元素触发touchstart时将中间量设为true，touchend时将中间量设为false;

2：不保留微信的下拉显示网址---直接给body绑定touchmove事件，阻止默认行为。

http://www.jianshu.com/p/2eddee561971



暗夜星河
关注
专栏目录
禁用微信浏览器的下拉_解决微信浏览器禁止下拉查看真实域名网址的问题
天马3798
08-30 1786
一、原理 监听touchmove 事件，取消默认操作，则就不会触发页面的下拉。 二、代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=devic
移动端弹出层滑动，导致底层body滑动（阻止touchmove事件冒泡？）
weixin_42661283的博客
04-15 3378
事件冒泡？移动端如何阻止触摸滑动事件冒泡，一个节点可滑动而不影响body节点的滑动 准确的说：应该是锁定背景滚动 描述：原body内容的高度已经超过了手机屏的可视区域的好几倍了，这时候点击某个按钮，出现一个弹出层，固定定位在底部，有一定的高度，超过高度内容可滚动，当滚动到底部时，或者内容并没有高过弹出层的高度，向上或向下都会给原本body里的内容产生滚动，这并不是我们想要的效...
阻止微信浏览器下拉滑动效果（ios11.3 橡皮筋效果）
weixin_34123613的博客
04-02 832
在升级到 ios11.3 系统后，发现之前阻止页面滚动的代码e.preventDefault代码失效了。于是自己折腾了一番，找到了解决办法，分享给大家。 一、前言 浏览器在移动端有一个默认触摸滚动的效果，让我们感触最深的莫过于微信浏览器里面，下拉时自带橡皮筋的效果。 然而在开发的时候我们经常需要阻止此效果。 在此先直接给一个方案，直接加上...
touch简单判断用户上滑或下拉操作
error
08-03 713
//判断touch事件 var startx,starty,endx,endy; //开始点击的时候获取触点 document.addEventListener("touchstart",function(e){ startx = e.touches[0].pageX; starty = e.touches[0].pageY; }) //结束点击时获得触点 document.addEventListener("touchend",function(e){ endx = e.chang
微信小程序之下拉刷新事件、上拉触底事件和案例
最新发布
哥的时代，为你保驾护航
01-31 4998
一、页面事件 - 下拉刷新事件1、什么是下拉刷新2、启用下拉刷新3、配置下拉刷新窗口的样式4、监听页面的下拉刷新事件5、停止下拉刷新的效果二、页面事件 - 上拉触底事件1、什么是上拉触底2、监听页面的上拉触底事件3、配置上拉触底距离三、页面事件 - 上拉触底案例1、案例的实现步骤2、步骤1 - 定义获取随机颜色的方法3、步骤2 - 在页面加载时获取初始数据4、步骤3 - 渲染 UI 结构并美化页面效果5、步骤4 - 上拉触底时获取随机颜色。
【前端】页面下拉加载和touchMove冲突解决（未完全解决）
weixin_38792911的博客
09-17 1230
问题描述： [Intervention] Ignored attempt to cancel a touchmove event with cancelable=false, for example because scrolling is in progress and cannot be interrupted. 翻译：尝试取消一个touchmove事件cancelable=false，例如，因为滚动正在进行，不能被中断。 其他情况补充： 页面功能描述： 模拟聊天页面，下拉加载过去的聊天记录，对于单
Touch事件
ddlovebaby的博客
05-15 514
Touch事件 ​最基本的touch事件包括4个事件： touchstart： 当在屏幕上按下手指时触发 touchmove： 当在屏幕上移动手指时触发 touchend： 当在屏幕上抬起手指时触发 touchcancel： 当一些更高级别的事件发生的时候（如电话接入或者弹出信息）会取消当前的touch操作，即触发touchcancel。一般会在touchcancel时暂停游戏、存档等操作。 ​ ...
微信浏览器禁止页面下拉查看网址实例详解
08-30
在微信浏览器中，防止页面下拉查看网址可以通过JavaScript代码隐藏默认的touchmove事件。例如，使用jQuery库，可以使用以下代码： ``` $('body').on('touchmove', function(event) { event.preventDefault(); }); `...
微信禁止下拉查看URL的处理方法
11-28
但这种方法可能会导致下拉时URL的短暂闪烁现象，影响用户体验。 综合以上策略，可以结合使用，例如在阻止`touchmove`的同时，添加对`scroll`位置的判断和滚动事件的监听，以减少各种情况下的漏洞。此外，还可以...
微信浏览器下拉黑边解决方案 wScroollFix
10-15
`wScroollFix` 是一个专门针对这个问题的解决方案，它可以帮助开发者隐藏微信浏览器中的下拉黑边。这个库通过监听和处理触摸事件，确保页面在滚动时不会触发黑边显示。 1. **不需要滚动的页面**： 对于不包含滚动...
禁止ios浏览器页面上下滚动 (橡皮筋效果)
热门推荐
qq_40717869的博客
08-16 2万+
在ios任何版本的浏览器（包括ios微信内置的浏览器），滚动页面的时候会出现整个页面上下滚动的效果（百度说是橡皮筋效果），虽然不耽误使用，但是让人心烦，所以要禁止掉这个行为。 有两种方法可以解决这个问题：（推荐使用第二种方法） 1.用fixed定位来解决 解决思路：这个就是把html,body设置width: 100%; height: 100%; position: fixed;top:0...
H5微信中禁止网页下拉出现"网页由XXX提供"
qq_35165469的博客
08-12 6964
不知道你们都是怎么解决h5下拉时，固定元素会随之下移，顶部出现“此网页是有XXX提供” 下面是我的解决方案，希望能够对有需要的你有帮助： 我的布局使用的是position，头部、尾部使用的是position：fixed，内容区使用的是position：absulote并且可以滚动，下拉页面时，在ios中头部、尾部都是固定的，内容区滑动也OK的；但是在安卓手机上，下拉页面的时候，头部和尾部都会随...
解决手机上层滑动，导致底层body滑动（touchmove的阻止）
--承诺同乐--的博客
11-09 4814
原文链接：https://www.haorooms.com/post/webapp_bodyslidebcdiv 下图是截取了项目部分图片~左边白色区域是从左侧滑出的菜单栏，右边灰色区域是遮罩层； 当左边用户中心白色区域菜单过多，或者是手机屏幕过小出现滚动条的时候，在其表层滑动时，底层部分body也会跟着滑动~   解决方法： 1、该区域没有滚动条： 最直接的办法，禁止表层滑动，如...
web移动端：touchmove实现局部滚动
aiyishengyishi的专栏
12-06 1万+
总结一下最近项目用到的一个功能点，具体要求如下： body中会呈现一个可滚动的长页面，在点击某个按钮的时候，会出现一个弹出框，由于弹出框的内容较长，会出现滚动条，但是要保证位于弹框下部的body在弹框滚动的时候不触发滚动事件实现效果图如下： 一.css部分html,body{ margin:0; padding: 0; } .btn{ position: fixed;
滑动表层div时阻止底层div滑动
wangyun_www的博客
07-25 1万+
http://www.haorooms.com/post/webapp_bodyslidebcdiv 我给body一个overflow：hidden和高度是没有用的。手机网站上背景还是可以滑动，然后我给body一个touchmove的preventdefault()阻止事件，body滑动阻止了，PC上面是可以了，但是手机上面滑动div还是会导致底部body的滑动，我给div 一个阻止冒泡的事件st
移动端浏览器和微信浏览器上禁止body的滚动条
angou6476的博客
12-20 363
一般禁止body滚动的做法就是设置overflow:hidden。 但是很奇怪的发现在移动端浏览器和微信浏览器上这个不起作用，然后我分析了我的写法，就是在body上加了一个class去定义属性，然后改成标签的定位，如body{overflow:hidden;}，这个实现是可以的，没有滚动条。 再进一步分析，如果要用class去实现没有滚动条，如下代码设置： .index_bod...
微信浏览器中，使用touchMove等事件时，会同时导致整个页面下拉显示网址问题解决！！
SilenceJude的博客
11-04 2244
问题描述： 页面需要做一个上拉下拉的滑动效果，所以自己加了一些touchmove，touchstart，touchend等事件来控制。pc下效果都挺不错的，但是到了微信浏览器中，恶心的情况就来了：每次下拉的时候，都会导致微信浏览器整个页面下拉显示网址，同时由于这两个事件冲突导致下滑效果非常差。 问题分析过程： 先来一通疯狂百度再说。 结果查到的东西全是让禁用touchmove事件，还有一些高级点的加了一些判断，比如通过类名或者设置原型链上的某个属性值来判断是否阻止默认事件。 document
移动端实现简单的下拉刷新【web前端】
da宗熊专栏
11-13 2万+
说明本文完全是个人学习，实现并不做过多的功能封装。实现原理依赖元素的 overflow-y: auto 的属性，实现滚动轴。通过改变 “刷新提醒”的元素的高度，达到下拉的效果。如图：例如，有如下的结构:<div id="wrap"> <!-- #pull-down为下拉加载更多的提醒 --> <div id="pull-down" class="pull-down">
触摸事件中touchstar、touchmove、touchend、touchcancel事件应用方法及实例
06-06
在移动端开发中，触摸事件是非常常见的一种事件，而其中最常用的就是touchstart、touchmove、touchend、touchcancel事件。 1. touchstart事件 当手指触摸屏幕时，会触发touchstart事件。touchstart事件触发后，会返回一个TouchEvent对象，其中包含了一些关于触摸点的信息，如触摸点的坐标、触摸点的标识符等。 以下是一个touchstart事件的实例： ```javascript document.addEventListener('touchstart', function(event) { console.log('触摸点的坐标：', event.touches[0].clientX, event.touches[0].clientY); }); ``` 2. touchmove事件 当手指在屏幕上移动时，会触发touchmove事件。和touchstart事件一样，touchmove事件也会返回一个TouchEvent对象，其中包含了关于移动后触摸点的信息。 以下是一个touchmove事件的实例： ```javascript document.addEventListener('touchmove', function(event) { console.log('移动后触摸点的坐标：', event.touches[0].clientX, event.touches[0].clientY); }); ``` 3. touchend事件 当手指离开屏幕时，会触发touchend事件。touchend事件同样会返回一个TouchEvent对象，其中包含了关于离开屏幕后的触摸点信息。 以下是一个touchend事件的实例： ```javascript document.addEventListener('touchend', function(event) { console.log('离开屏幕后的触摸点的坐标：', event.changedTouches[0].clientX, event.changedTouches[0].clientY); }); ``` 4. touchcancel事件 当由于某些原因（如系统中断）触摸事件被取消时，会触发touchcancel事件。touchcancel事件同样会返回一个TouchEvent对象，其中包含了关于取消前的触摸点信息。 以下是一个touchcancel事件的实例： ```javascript document.addEventListener('touchcancel', function(event) { console.log('取消前的触摸点的坐标：', event.touches[0].clientX, event.touches[0].clientY); }); ``` 以上就是touchstart、touchmove、touchend、touchcancel事件的应用方法及实例。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值