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

来源：互联网发布：淘宝买身份证编辑：程序博客网时间：2024/04/30 13:58

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

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

完整的代码实现如下：

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Square move with mouse</title><script type="text/javascript" src="jquery.js"></script><style type="text/css">*{padding: 0;margin:0;}html,body{position:relative;width: 100%;height: 100%;}.square{position: absolute; left: 0;top:10;width: 100px;height: 100px;background:red;}.menu{display:none;position:absolute;left:0; top: 120px;width: 100px;height: 100px;background: yellow;}</style></head><body><div class="square"></div><div class="menu"></div><script type="text/javascript">(function() {var status = 0,scrollTop = document.documentElement.scrollTop || document.body.scrollTop,scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;$('body').on('mousedown', function(e) {var event = e || window.event;status = 1;}).on('mousemove', function(e) {var event = e || window.event,x = event.pageX || event.clientX + scrollleft,y = event.pageY || event.clientY + scrollTop;if(status === 1) {$('.square').css({'left':x, 'top':y});}}).on('mouseup', function(e) {var event = e || window.event,x = event.pageX || event.clientX + scrollleft,y = event.pageY || event.clientY + scrollTop;if(status === 1) {$('.square').css({'left':x, 'top':y});}status = 0;}).on('contextmenu', function(e) {var event = e || window.event,x = event.pageX || event.clientX + scrollleft,y = event.pageY || event.clientY + scrollTop;$('.menu').css({'left':x,'top':y,'display':'block'});})})()</script></body></html>

0 0