Chrome无法调用preventDefault阻止touch事件解决办法

坑爹的开始….

Chorme56+开始为了让页面滚动变得更为流畅,在 window、document 和 body 上注册的 touchstarttouchmove 事件处理函数,会默认为是 passive: true。浏览器忽略默认事件的preventDefault(), 你要是手动阻止会弹出一个警告, 告诉你阻止不了!!!

解决办法

CSS属性上对想要禁用触摸事件的元素设置touch-action: none, 然后用js获取该元素真实DOM元素添加事件处理

1
2
3
4
5
const ele = document.getElementById('app');
ele.addEventListener('touchmove', (e) => {
e.preventDefault();
e.stopPropagation();
}, { passive: false })

react-swipe无法阻止页面左右滑动

这里多说一嘴, 是关于目前在做的项目中出现的问题, react-swipe无法阻止卡片的左右滑动, 采用上面的方法依旧阻止不了touch事件, 苦逼的想了两天依旧没有想出来, 幸好有老大救命…..

在整个react-swipe的根组件的兄弟节点(不能是父节点), 加一个遮罩层, 在某种逻辑的情形下, 显示该遮罩层, 在该遮罩层采用上述方法, 设置CSS和绑定JS事件, 达到实现阻止卡片左右滑动的效果.

(吐槽) (;´д`)ゞ

越来越多的平台(微信公众平台,新浪微博,简书,百度打赏等)支持打赏功能,付费阅读时代越来越近,特此增加了打赏功能,支持微信打赏和支付宝打赏。坚持原创技术分享,您的支持将鼓励我继续创作!