【移动端】滑动验证致使整个屏幕都在动

最近发现一款JQ图片滑动验证的代码。当手机端拖动按钮元素时，会触发手机浏览器自带事件，导致滑动失效或切屏，并且浏览器报错。

[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/features/5093566007214080

解决方法1

html { touch-action: pan-y; }

修改 CSS 属性 touch-action，声明浏览器可执行的默认动作，详细请参考：touch-action

解决办法2

document.addEventListener('touchstart', func, {passive:false});document.addEventListener('touchmove', func, {passive:false});

注意touch事件监听绑定的第三个参数{ passive: false }

通过传递 passive 为 false 来明确告诉浏览器：事件处理程序调用 preventDefault 来阻止默认滑动行为。

解决方法3

出现此问题看看是否调用了旧版本的zepto.min.js插件，只需要调用新版zepto.min.js插件即可

【移动端】滑动验证致使整个屏幕都在动相关推荐

移动端滑动验证为什么整个屏幕都在动？
开发手机移动端验证时,发现拖动元素会触发手机浏览器自带事件,导致滑动失效或切屏, 解决方法: html{touch-action:none;touch-action:pan-y; } var star ...
【移动端】滑动验证在浏览器处理时致使整个屏幕都在滑动
html { touch-action: pan-y; } document.addEventListener('touchstart', func, {passive:false}); docu ...
Excel（2）：按上下左右键不是单元格在动，而是整个屏幕都在动
常常遇到在Excel里面,按上下左右键,本来想移动单元格,然而不幸的是,整个页面都在一起动! 百度了好久,终于知道原来是scroll lock键被按下. 如果是笔记本的话,键盘上还没有这个键. 也不知 ...
Android自定义滑动验证条
*注:不知道为什么,h5的标签在这里没用了,所以我也只能用Markdown的语法来写了项目地址: https://github.com/994866755/handsomeYe.seekbar.gi ...
阿里python认证_集成阿里云滑动验证(python)
阿里云的服务数据风控下面有项滑动验证, 适合有人机验证场景的应用接入. 所谓滑动验证, 是在需要进行人机识别时, 前端出现验证滑块, 通过拖动滑块到末尾, 实现验证. 如果阿里云认为此次验证风险稍高 ...
滑动验证+短信验证码接入=复制粘贴（Java）
PC版滑动验证的实现简介滑动验证是基于人机识别技术开发的智能验证码产品.用户通过简单的右滑交互,无需思考即可通过验证. 资源引入说明使用PC版滑动验证码,需要引入以下js资源,为保证服务功能最优 ...
wordpress滑动验证_WordPress图像滑块：滑动还是不滑动？
wordpress滑动验证 Image sliders (also known as image carousels or slideshows) can be a convenient way to ...
uniapp滑动验证
uniapp滑动验证效果图(已经封装成组件) use.vue <template><view ><sliderzz @change="change" ...
基于Java实现图片滑动验证(包含前端代码)
前言 1.下面是一个效果展示: 2.先抱怨一下,在博客上面的抄袭真的非常严重,为了实现一个图片滑动验证,我搜索了挺久的资料,不过内容翻来覆去就是同样的内容,千篇一律,作者还各不相同:内容相同我就不多说 ...

【移动端】滑动验证致使整个屏幕都在动

【移动端】滑动验证致使整个屏幕都在动相关推荐

最新文章

热门文章