这是腾讯一面给我的面试题,现在想想其实也蛮简单的,主要是考察鼠标事件。我当时没有完成的比较好。面试完后仔细又重新实现了下。
鼠标对正方形元素拖拽和放下,主要涉及的鼠标事件包括:mouseover,mousemove,mousedown.。
事件流程如下
(1)当鼠标首次点击触发mousedown
(2)移动时触发mousemove,正方形才跟着移动
(3)鼠标点击完成后释放时触发mouseup,正方形不再跟着移动。
这里首先要有mousedown事件发生,正方形才跟着移动,所以可以设置一个状态status,当mousedown事件发生后status变为1,mouseup事件发生时,status = 0,在mousemove的回调函数中判断,只有当status=1时,正方形才跟着移动。
除了考察鼠标事件外,还考察了鼠标指针相对于文档的位置。
scrollTop = document.documentElement.scrollTop || document.body.scrollTop,标准盒模型中是document.documentElement也即为html,IE盒模型中是document.body.
scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
x = event.pageX || event.clientX + scrollleft, Firefox中鼠标当前的文档坐标是 pageX,而其他浏览器需要使用鼠标距离当前视口的距离加上文档滚动偏移。
y = event.pageY || event.clientY + scrollTop