移动端有时候触发不了touchend 使用event.preventDefault()后页面无法滚动

使用移动端设备监听手指触摸事件时发现有时候无法触发touchend事件，因此在监听touchend事件时通过 阻止页面默认事件 event.preventDefault()来实现事件监听，但是发现页面的滚动事件也被阻止了。怎么样既不会阻止页面滚动又可以监听手指抬起事件？
通过查看资料发现元素上绑定了touchcancel和touchend两个事件：
1、长按后不移动直接抬起手指，触发的是touchcancel；
2、长按后轻轻移动一下再抬起手指，触发的是touchend；
针对这细微的变化实际上用户很难去辨别，因此给元素这两个事件绑定同一个方法，此时不再需要阻止页面默认事件也可以触发手指抬起动作：

<divclass="chat"id="chat"    @touchcancel="handleTouchEnd" @touchend="handleTouchEnd"></div>

移动端有时候触发不了touchend 使用event.preventDefault()后页面无法滚动相关推荐

移动端和PC端弹出遮罩层后,页面禁止滚动的解决方法及探究
移动端和PC端弹出遮罩层后,页面禁止滚动的解决方法及探究参考文章: (1)移动端和PC端弹出遮罩层后,页面禁止滚动的解决方法及探究 (2)https://www.cnblogs.com/ranyon ...
click和touchmove vue_移动端touch事件影响click事件以及在touchmove添加preventDefault导致页面无法滚动的解决方法...
这两天自己在写一个手机网页,用到了触屏滑动的特效,就是往右滑动的时候左侧隐藏的菜单从左边划出来. 做完之后在手机原生浏览器中运行正常,但在QQ和微信中打开,发现touchmove只会触发一次,而且to ...
h5 解决ios端输入框失去焦点后页面不回弹或者底部留白问题
h5 解决ios端输入框失去焦点后页面不回弹或者底部留白问题参考文章: (1)h5 解决ios端输入框失去焦点后页面不回弹或者底部留白问题 (2)https://www.cnblogs.com/bl ...
电脑端腾讯视频如何设置离线下载完成后自动关机
小编今天更新"电脑端腾讯视频如何设置离线下载完成后自动关机",1.点击主页面右上角的三条横杠 2.点击[设置] 3.点击左侧的[自动关机] 4.勾选[离线下载完成自动关机] 5.点 ...
监听页面滚动触发事件，页面停止滚动触发事件
监听页面滚动触发事件,页面停止滚动触发事件核心代码 data() {return {timer: null,isTipVisible: true} } methods: {handleScrollS ...
解决微信H5页面软键盘弹起后页面下方留白的问题（iOS端）
解决微信H5页面软键盘弹起后页面下方留白的问题(iOS端) 参考文章: (1)解决微信H5页面软键盘弹起后页面下方留白的问题(iOS端) (2)https://www.cnblogs.com/zouw ...
anybackup mysql_AnyBackup-Linux MySQL 云容灾失败，执行输出提示错误：Master 端未开启 MySQL BinLog，请开启 BinLog 后重新发起任务...
关键字 MySQL BinLog 适用产品 AnyBackup 6.0.x 问题描述执行 MySQL 云容灾失败,执行输出提示错误,点击查看详情显示下列错误信息: MySQL 容灾任务出现异常.(错 ...
ios端h5页面双击页面会发生滚动问题解决办法
在IOS系统中,H5页面双击会引起页面发生向上滚动,以下代码方法解决这个兼容性问题亲测有用,记录一下一.在touchmove的时候进行阻止默认事件 (能解决使用了window添加了scroll滚动后 ...
跳出弹窗页面禁止滚动（PC端和手机端）
跳出弹窗页面禁止滚动(PC端和手机端) pc端如何实现 1.当弹窗显示时,为body元素添加属性:overflow:hidden, 当关闭弹窗时移除该属性即可 2.在弹窗的div上设置 @scroll ...

移动端有时候触发不了touchend 使用event.preventDefault()后页面无法滚动

移动端有时候触发不了touchend 使用event.preventDefault()后页面无法滚动相关推荐

最新文章

热门文章