场景:开发一个鼠标可拖动的组件,组件可通过点击进行展开收起。
问题:使用了onmousedown,onmouseup,onmousemove,click失效了/(ㄒoㄒ)/~~。现在要判断用户到底是拖动组件还是点击展开组件。
原始代码大致是:
... isShow = false;//组件是否展开 hasMove = false;//是否移动 elm.onmousedown = function(e) { e.preventDefault(); document.onmousemove = function(e) { hasMove = true; ... } document.onmouseup = function(e) { if(!hasMove&&!isShow){ isShow = true } } }
后来发现点击事件也能展开,就是前几次点击总是不打开,点两次后才能顺滑的操作。一直以为是用户点击后移动了才导致点不开,所以没当回事。后来自己仔细点了才发现,这不是操作问题,是BUG。问题就是进入onmousemove事件后不代表就移动了鼠标,有可能是没有移动的。
解决:代码就不贴出来了,大致思路就是在onmousemove事件中计算鼠标偏移量,根据偏移大小判断是在拖动组件还是点击展开。改后效果杠杠的,操作瞬间顺滑了。
发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/177472.html原文链接:https://javaforall.net
