事件綁定 版 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> ...
事件綁定 版
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>Document</title> 7 <style> 8 #box { 9 width: 200px; 10 height: 200px; 11 background: red; 12 position: absolute; 13 } 14 </style> 15 </head> 16 <body> 17 <div id="box">box</div> 18 <script> 19 var oBox = document.querySelector('#box') 20 oBox.onmousedown = function (e) { 21 e = e || window.event 22 // 一旦滑鼠按下了，滑鼠到div的距離就應該固定下來了，所以要在這裡獲取 23 // 獲取滑鼠到div的頂部和左邊的距離 24 var disX = e.offsetX 25 var disY = e.offsetY 26 // move事件寫給document，因為只要在box上按下了，在文檔中移動都應該觸發 27 document.onmousemove = function (e) { 28 e = e || window.event 29 var left = e.clientX - disX 30 var top = e.clientY - disY 31 32 oBox.style.left = left + 'px' 33 oBox.style.top = top + 'px' 34 } 35 // up事件也寫給document，這樣滑鼠在拖到外面up就也會觸發 36 document.onmouseup = function () { 37 // 滑鼠抬起停止拖拽 38 document.onmousemove = null 39 } 40 // 避免全選文字造成的bug，在這裡阻止預設行為 41 if (e.preventDefault) { 42 e.preventDefault() 43 } else { 44 return false 45 } 46 } 47 </script> 48 </body> 49 </html>
事件監聽，限定範圍 版
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>Document</title> 7 <script src="../../utils.js"></script> 8 <style> 9 #box { 10 width: 200px; 11 height: 200px; 12 background: red; 13 position: absolute; 14 } 15 </style> 16 </head> 17 <body> 18 <div id="box">box</div> 19 <script> 20 var oBox = document.querySelector('#box') 21 23 on(oBox, 'mousedown', function (e) { 24 // 每次mousedown的時候都要重新計算一下最大值，防止瀏覽器縮放導致值不准確 25 var maxLeft = window.innerWidth - oBox.offsetWidth 26 var maxTop = window.innerHeight - oBox.offsetHeight 27 e = e || window.event 28 // 獲取滑鼠到box的相對坐標 29 var disX = e.offsetX 30 var disY = e.offsetY 31 function move (e) { 32 e = e || window.event 33 var top = e.clientY - disY 34 var left = e.clientX - disX 35 // 判斷 36 if (top < 0) top = 0 37 if (top > maxTop) top = maxTop 38 39 if (left < 0) left = 0 40 if (left > maxLeft) left = maxLeft 41 42 oBox.style.left = left + 'px' 43 oBox.style.top = top + 'px' 44 } 45 on(document, 'mousemove', move) 46 on(document, 'mouseup', function () { 47 off(document, 'mousemove', move) 48 }) 49 // 防止全選文字，阻止預設行為 50 if (e.preventDefault) { 51 e.preventDefault() 52 } else { 53 return false 54 } 55 }) 56 </script> 57 </body> 58 </html>
utils.js代碼
1 const utils = { 2 /** 3 * 添加事件監聽 4 * @param ele <DOMObject> 添加事件的DOM元素 5 * @param type <string> 事件類型（不帶on） 6 * @param fn <function> 事件處理函數 7 * @param [isCapture] <boolean> 可選參數，是否捕獲，true代表捕獲，false代表冒泡，預設為false 8 */ 9 on: function (ele, type, fn, isCapture) { 10 // 如果參數沒有傳，預設值為false 11 if (isCapture === undefined) isCapture = false 12 if (ele.attachEvent) { 13 // IE 14 ele.attachEvent('on' + type, fn) 15 } else { 16 ele.addEventListener(type, fn, isCapture) 17 } 18 }, 19 /** 20 * 移出事件監聽 21 * @param ele <DOMObject> 添加事件的DOM元素 22 * @param type <string> 事件類型（不帶on） 23 * @param fn <function> 事件處理函數 24 * @param [isCapture] <boolean> 可選參數，是否捕獲，true代表捕獲，false代表冒泡，預設為false 25 */ 26 off: function (ele, type, fn, isCapture) { 27 // 如果參數沒有傳，預設值為false 28 if (isCapture === undefined) isCapture = false 29 if (ele.detachEvent) { 30 ele.detachEvent('on' + type, fn) 31 } else { 32 ele.removeEventListener(type, fn, isCapture) 33 } 34 } 35 }
