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

坑爹的开始….

Chorme56+开始为了让页面滚动变得更为流畅，在 window、document 和 body 上注册的

touchstart

和

touchmove

事件处理函数，会默认为是

passive: true

。浏览器忽略默认事件的

preventDefault()

, 你要是手动阻止会弹出一个警告, 告诉你阻止不了!!!

解决办法

在CSS属性上对想要禁用触摸事件的元素设置

touch-action: none

, 然后用js获取该元素真实DOM元素添加事件处理

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

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

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

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

(吐槽) (；´д｀)ゞ