react-sortable-hoc拖拽无法点击问题解决

在使用react-sortable-hoc来实现列表拖拽排序时遇到一个问题:

首先看下业务场景,grid布局的拖拽排序,只是每个卡片里都有一个点击事件,发现在按钮的click事件和react-sortable-hoc的mousedown事件冲突了,特别是在你把pressDelay设置低于300ms时,所以造成的问题就是点击按钮click没有效果。


解决方法:

一开始想到可能是事件冒泡,参考文章:https://www.jianshu.com/p/47f0a75d2513

按照文章提供的方法,在按钮添加阻止事件冒泡方法,然而没什么卵用

最后用css方法解决,在拖拽item项目里的class添加一个属性:pointer-events: bounding-box 即可点击



这就算是pointer-events的黑魔法吧

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容