摘要：最近做了一个物体可拖拽的需求，由于在手机上的支持性不是很好，就利用了系列事件，改变的进行位移，从而达到物体跟随手指移动的效果。但是发现了有以下提示虽然最终找到了原因是升级版本具体提给了，但是却让我陷入了思考。
最近做了一个物体可拖拽的需求，由于drag-and-drop在手机上的支持性不是很好，就利用了touch系列事件，改变transform的translate进行位移，从而达到物体跟随手指移动的效果。
但是发现了有以下提示
[Violation] Added non-passive event listener to a scroll-blocking "touchstart" event. Consider marking event handler as "passive" to make the page more responsive.
虽然最终找到了原因是升级taro1.3版本(具体提issue给taro了)，但是却让我陷入了思考。
可滑动节点应该是passive相信大家在使用react开发的时候，如果在touch事件里添加e.preventDefault()，控制台会报以下的错误：
react-dom.development.js:1458 [Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive
这是由于当监听touch事件时，react默认已经将addEventListener的第三个参数加上了passive:true，为了可滑动节点在滑动的时候不需要等待js执行的时候就进行滑动的动作，可以看以下touchmove受preventDefault的影响->传送门
从视频里可以看出来，当没有加passive: true时，页面滑动会延迟，甚至出现卡顿。
在可滑动节点上禁止touch的默认行为因为react默认开启了passive，这让我们无法去通过js层面去禁止可滑动节点touch的默认行为，但是在一些场景下我们禁止掉滑动，通过自己的逻辑来实现“滑动效果”，这时候该怎么做呢？
这里还有一个法宝：
在css属性中，有那么一个东西叫做touch-action。
touch-action 用于设置触摸屏用户如何操纵元素的区域(例如，浏览器内置的缩放功能)。
当touch-action设置为none的时候，浏览器将不能对该节点进行任何的触摸行为，比如说双击图片放大这种行为也可以禁止。所以我们可以设置touch-action: none，代替preventDefault禁止滑动。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/105839.html
摘要：发展原生拖放的发展大致可分为三个阶段。在的实例基础上，进一步制定了拖放的规范。也根据规范实现了原生拖放功能。被拖动的元素在放置目标范围内移动时，会持续触发该事件。参考资料拖放操作拖拽操作拖拽类型列表高级程序设计第版第章脚本编程原生拖放 发展 原生拖放的发展大致可分为三个阶段：IE4、IE5+、HTML5。 IE4 是最早在网页中引入 JavaScript 拖放功能的，当时只有图像和选中...
阅读 3758·2023-04-25 20:00
阅读 3108·2021-09-22 15:09
阅读 504·2021-08-25 09:40
阅读 3411·2021-07-26 23:38
阅读 2200·2019-08-30 15:53
阅读 1096·2019-08-30 13:46
阅读 2788·2019-08-29 16:44
阅读 2043·2019-08-29 15:32
