【web前端技术交流帖】微场景swipeUp/swipeDown在谷歌浏览器下无效

后盾网建校于2010年，一直专注于PHP全栈开发技术培训，并且专门为大家设置了【php与web技术求助专区】，如果你在学习中，遇到相关方面的技术难题，可以在<后盾网论坛>发帖子哦，后盾网的技术讲师会亲自为你解答的！

以下是为大家分享的精品帖子，仅供大家学习交流！

---

@黑执事盾友提问：

各位帅哥美女，笔者在写微场景的过程中，发生了一件奇怪的事。就是用谷歌浏览器模拟打开html发现swipeUp以及swipeDown无效，tap会触发两次，控制台无报错，文件已经上传附件。希望各位大神能够查出纰漏，我觉得这应该有很多人遇到，希望有人指引迷津，拜谢……

@深水鱼老师解答：

上下滑动不生效是因为默认的移动事件影响了

加上上面这段的代码就好了。

tap触发两次貌似是个bug，稍后我详细测试一下。

@黑执事盾友提问：

您好，孙老师。我把代码加在自己的js文件头部没有效果，加在zepto.min.js或者touch.js也没有效果，而且有警告Unable to preventDefault inside passive event listener due to target being treated as passive.望指点迷津。

真是奇怪，我加上代码后，谷歌进行模拟调试硬生生的没有弹出效果而且控制台有警告。

@黑执事盾友总结：

找到了个解决方法在 你要添加移动事件的元素上面加人css 属性 touch-action: none; 禁止所有的默认事件，就好使了。

从 chrome56 开始，在 window、document 和 body 上注册的 touchstart 和 touchmove 事件处理函数，会默认为是 passive: true。浏览器忽略 preventDefault() 就可以第一时间滚动了。如果在以上这 3 个元素的 touchstart 和 touchmove 事件处理函数中调用 e.preventDefault() ，会被浏览器忽略掉，并不会阻止默认行为。

@深水鱼老师解答：

感谢楼上同学的分析。

给body的css中加一个 touch-action: none;属性就行了。