在JavaScript 中，mousemove 事件是一個實時響應的事件，當鼠標指針的位置發生變化時（至少移動一個像素），就會觸發 mousemove 事件。該事件響應的靈敏度主要參考鼠標指針移動速度的快慢以及瀏覽器跟蹤更新的速度。
示例
下面示例演示了如何綜合應用各種鼠標事件實現頁面元素拖放操作的設計過程。實現拖放操作設計需要解決以下幾個問題。
- 定義拖放元素為絕對定位以及設計事件的響應過程，這個比較容易實現。
- 清楚幾個坐標概念：按下鼠標時的指針坐標，移動中當前鼠標指針坐標，松開鼠標時的指針坐標，拖放元素的原始坐標，拖動中的元素坐標。
- 算法設計：按下鼠標時，獲取被拖放元素和鼠標指針的位置，在移動中實時計算鼠標偏移的距離，並利用該偏移距離加上被拖放元素的原坐標位置，獲得拖放元素的實時坐標。
如下圖所示，其中變量 ox 和 oy 分別記錄按下鼠標時被拖放元素的縱橫坐標值，它們可以通過事件對象的 offsetLeft 和 offsetTop 屬性獲取。變量 mx 和 my 分別表示按下鼠標時，鼠標指針的坐標位置。而 event.mx 和 event.my 是事件對象的自定義屬性，用它們來存儲當鼠標移動時鼠標指針的實時位置。
當獲取了上面 3 對坐標值之后，就可以動態計算拖動中元素的實時坐標位置，即 x 軸值為 ox+event.mx-mx，y 軸為 oy+event.my-my。當釋放鼠標按鈕時，就可以釋放事件，並記下松開鼠標指針時拖動元素的坐標值，以及鼠標指針的位置，留待下一次拖放操作時調用。
1 <div id="box" ></div> 2 <script> 3 // 初始化拖放對象 4 var box = document.getElementById("box"); 5 // 獲取頁面中被拖放元素的引用指針 6 box.style.position = "absolute"; // 絕對定位 7 box.style.width = "160px"; // 定義寬度 8 box.style.height = "120px"; // 定義高度 9 box.style.backgroundColor = "red"; // 定義背景色 10 // 初始化變量，標准化事件對象 11 var mx, my, ox, oy; // 定義備用變量 12 function e(event){ // 定義事件對象標准化函數 13 if( ! event){ // 兼容IE瀏覽器 14 event = window.event; 15 event.target = event.srcElement; 16 event.layerX = event.offsetX; 17 event.layerY = event.offsetY; 18 } 19 event.mx = event.pageX || event.clientX + document.body.scrollLeft; 20 // 計算鼠標指針的x軸距離 21 event.my = event.pageY || event.clientY + document.body.scrollTop; 22 // 計算鼠標指針的y軸距離 23 return event; // 返回標准化的事件對象 24 } 25 // 定義鼠標事件處理函數 26 document.onmousedown = function(event){ // 按下鼠標時，初始化處理 27 event = e(event); // 獲取標准事件對象 28 o = event.target; // 獲取當前拖放的元素 29 ox = parseInt(o.offsetLeft); // 拖放元素的x軸坐標 30 oy = parseInt(o.offsetTop); // 拖放元素的y軸坐標 31 mx = event.mx; // 按下鼠標指針的x軸坐標 32 my = event.my; // 按下鼠標指針的y軸坐標 33 document.onmousemove = move; // 注冊鼠標移動事件處理函數 34 document.onmouseup = stop; // 注冊松開鼠標事件處理函數 35 } 36 function move(event){ // 鼠標移動處理函數 37 event = e(event); 38 o.style.left = ox + event.mx - mx + "px"; // 定義拖動元素的x軸距離 39 o.style.top = oy + event.my - my + "px"; // 定義拖動元素的y軸距離 40 } 41 function stop(event){ // 松開鼠標處理函數 42 event = e(event); 43 ox = parseInt(o.offsetLeft); // 記錄拖放元素的x軸坐標 44 oy = parseInt(o.offsetTop); // 記錄拖放元素的y軸坐標 45 mx = event.mx ; // 記錄鼠標指針的x軸坐標 46 my = event.my ; // 記錄鼠標指針的y軸坐標 47 o = document.onmousemove = document.onmouseup = null; 48 // 釋放所有操作對象 49 } 50 </script>