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

àì夳堔傛蜴生んèń 2022-08-21 02:27 59阅读 0赞

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

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