资讯专栏INFORMATION COLUMN

一次拖拽功能引发的思考

lastSeries / 1774人阅读

摘要:最近做了一个物体可拖拽的需求,由于在手机上的支持性不是很好,就利用了系列事件,改变的进行位移,从而达到物体跟随手指移动的效果。但是发现了有以下提示虽然最终找到了原因是升级版本具体提给了,但是却让我陷入了思考。

最近做了一个物体可拖拽的需求,由于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

相关文章

  • 前端拖拽组件优化

    摘要:先来看有赞做的类似的拖拽组件,它引用的库封装了拖拽的时候跟随鼠标的影子成为,是自动生成的。利用鼠标事件拖拽更流畅优化之后的拖拽显然比示例的顺畅很多,不会有种吃力拖动的感觉。拖动过程中也能很明显地看出当前拖拽的元素。 为什么弃用Html5 drag Api 之前我也用的Drag Api写了一个draggable组件,使用起来总觉得体验有点不好。 先来看有赞做的类似的拖拽UI组件,它引用...

    mykurisu 评论0 收藏0
  • HTML5 原生拖放

    摘要:发展原生拖放的发展大致可分为三个阶段。在的实例基础上,进一步制定了拖放的规范。也根据规范实现了原生拖放功能。被拖动的元素在放置目标范围内移动时,会持续触发该事件。参考资料拖放操作拖拽操作拖拽类型列表高级程序设计第版第章脚本编程原生拖放 发展 原生拖放的发展大致可分为三个阶段:IE4、IE5+、HTML5。 IE4 是最早在网页中引入 JavaScript 拖放功能的,当时只有图像和选中...

    Thanatos 评论0 收藏0
  • 浏览器常用事件解析

    摘要:之前写过一篇浏览器事件的相关操作和事件运行的原理浏览器事件解析。注意,页面从浏览器缓存加载,并不会触发事件。事件有一个属性,返回一个布尔值。此外,不支持事件,可以使用事件代替。 之前写过一篇浏览器事件的相关操作和事件运行的原理——JavaScript浏览器事件解析。这一篇主要写一些常用的事件及一些可能的坑。 表单事件 键盘事件 当 , 的值发生变化时触发。此外,打开 contente...

    zhoutk 评论0 收藏0

发表评论

0条评论

lastSeries

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<