页面内元素跟随鼠标移动和右键菜单组件功能

最新推荐文章于 2025-01-15 09:31:11 发布

原创

最新推荐文章于 2025-01-15 09:31:11 发布 · 2.6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#mouse #mousedown #mosemove #mouseup #contextmenu

这是一篇关于鼠标事件在页面元素拖拽和右键菜单组件功能实现的博客。通过分析面试题，作者详细阐述了如何使用mouseover, mousedown, mousemove, mouseup和contextmenu等事件来创建交互效果。文章重点在于解释事件处理流程和状态管理，以确保元素在鼠标按下并移动时跟随，释放后停止移动。同时，还涉及到获取鼠标相对于文档位置的技巧。" 113369113,10546182,STM32通用定时器工作原理：时钟分频与应用,"['STM32开发', '嵌入式系统', '定时器原理', '微控制器']

这是腾讯一面给我的面试题，现在想想其实也蛮简单的，主要是考察鼠标事件。我当时没有完成的比较好。面试完后仔细又重新实现了下。

鼠标对正方形元素拖拽和放下，主要涉及的鼠标事件包括：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;

至于邮件菜单功能，我当时没想到鼠标有专门的对应的事件即 contextmenu.。我当时是判断点击鼠标时事件对象的button属性，其实这个属性存在兼容性问题，有的浏览器中是event.which。

完整的代码实现如下：