這是騰訊一面給我的面試題，現在想想其實也蠻簡單的，主要是考察滑鼠事件。我當時沒有完成的比較好。面試完後仔細又重新實作了下。
滑鼠對正方形元素拖拽和放下，主要涉及的滑鼠事件包括：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 >
<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>
![2021年銀行從業考試考情介紹,果斷收藏![圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)