未解bug – 博客更新(五十六)

444°C 08-09-2021
最近更新于:2022-08-29 14:56:20

文章摘要chatGPT

standby chatGPT responsing..

最近做鼠标拖拽功能的时候遇到了个难搞的问题,即鼠标按下并移动(拖拽)时判断鼠标方向(左右)并更改对应的left值(无缝对接)的同时进行transform偏移,这个逻辑用在移动端测试没问题,但是在pc端上鼠标按住拖拽修改left值后立即终止了鼠标事件,即拖拽判断修改left值后销毁了mousemove事件,并未同步执行transform偏移。

额外内容

功夫不负有心人,万万没想到问题居然还和mouseout事件有关!虽然知道mouseout和mouseleave之间的区别,但是为什么已经将事件绑定到其父元素上了,在其内部执行事件还会触发mouseout事件(解绑事件操作),真是百思不得其解!最后是将事件绑定(解绑)到父元素上,再将mouseout改为mouseleave才解决了问题。问题绝对在事件绑定元素上!又发现问题好像不在事件绑定元素上.. 在执行动画前解绑了所有事件,摸不着头脑。最新测试发现,右滑时触发left值修改后,因为每个li所绑定的事件都是独立的,所以滑动第一个li时突然切换left值偏移到最后一个li上,导致当前li事件自动中断,此时鼠标事件已经全部中断了,重新滑动触发的则是最后那个li的鼠标事件。目前问题出在什么地方仍没搞清楚.. (目前得出了个结论,鼠标按下并移动时,同时执行 left 与 translateX 位移操作会中断 transform 操作)快放弃治疗了,一个bug没解决另一个又来了,简直了.. 刚发现在mousedown事件下,mouseup事件要写在mousemove内部,并在mousemove外部解绑事件..


评论留言

既来之则留之~ 欢迎在下方留言评论,提交评论后还可以撤销或重新编辑。(Valine 会自动保存您的评论信息到浏览器)