文章摘要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 会自动保存您的评论信息到浏览器）