最近发现一款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插件即可