setCapture函數的作用就是將后續的mouse事件都發送給這個對象，releaseCapture就是將鼠標事件還回去，由 document、window、object之類的自行來處理。這樣就保證了在拖動的過程中，不會由於經過了其它的元素而受到干擾
另外，還有一個很重 要的事情是，在Win32上，mouse move的事件不是一個連續的，也就是說，並不是我們每次移動1px的鼠標指針，就會發生一個mousemove，windows會周期性檢查mouse 的位置變化來產生mousemove的事件。
所以，如果是一個很小的頁面對象，比如一個直徑5px的圓點，如果沒有setCapture和 releaseCapture，那么在鼠標按住之后，快速的移動鼠標，就有可能鼠標移動走了，但是小圓點還在原地，就是因為下一次的mousemove事 件已經不再發給這個圓點對象了。
web開發和windows開發最大的區別就是windows開發是有狀態的，而web開發是無狀態的，在windows中，一切操作都可以由程序來控制 ，除非強制執行ctrl+alt+del；但web操作就不一樣了，即使執行很重要的操作，用戶一點擊瀏覽器關閉按鈕，就將前面操作成果化為烏有.盡管可以在onunload事件中加些代碼，讓用戶可以選擇是否退出，但不能從根本上解決問題!
有一點遺憾:setCapture和releaseCapture 不支持鍵盤事件.只對onmousedown， onmouseup， onmousemove， onclick， ondblclick， onmouseover， onmouseout這樣的鼠標事件起作用.
用於拖拽運動的示例：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <!-- saved from url=(0039)http://www.fgm.cc/learn/lesson6/01.html --> 3 <html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 4 5 <title>完美拖拽</title> 6 <style type="text/css"> 7 html,body{overflow:hidden;} 8 body,div,h2,p{margin:0;padding:0;} 9 body{color:#fff;background:#000;font:12px/2 Arial;} 10 p{padding:0 10px;margin-top:10px;} 11 span{color:#ff0;padding-left:5px;} 12 #box{position:absolute;width:300px;height:150px;background:#333;border:2px solid #ccc;top:50%;left:50%;margin:-75px 0 0 -150px;} 13 #box h2{height:25px;cursor:move;background:#222;border-bottom:2px solid #ccc;text-align:right;padding:0 10px;} 14 #box h2 a{color:#fff;font:12px/25px Arial;text-decoration:none;outline:none;} 15 </style> 16 <script type="text/javascript"> 17 window.onload=function () 18 { 19 var oBox=document.getElementById("box"); 20 var oH2 = oBox.getElementsByTagName("h2")[0]; 21 var oA = oBox.getElementsByTagName("a")[0]; 22 var aSpan = oBox.getElementsByTagName("span"); 23 var disX = disY = 0; 24 var bDrag = false; 25 var aPos = [{x:oBox.offsetLeft, y:oBox.offsetTop}] 26 27 //鼠標按下, 激活拖拽 28 oH2.onmousedown = function (event) 29 { 30 var event = event || window.event; 31 bDrag = true; 32 disX = event.clientX - oBox.offsetLeft; 33 disY = event.clientY - oBox.offsetTop; 34 35 aPos.push({x:oBox.offsetLeft, y:oBox.offsetTop}) 36 37 this.setCapture && this.setCapture(); 38 39 return false 40 }; 41 42 //拖拽開始 43 document.onmousemove = function (event) 44 { 45 if (!bDrag) return; 46 var event = event || window.event; 47 var iL = event.clientX - disX; 48 var iT = event.clientY - disY; 49 var maxL = document.documentElement.clientWidth - oBox.offsetWidth; 50 var maxT = document.documentElement.clientHeight - oBox.offsetHeight; 51 52 iL = iL < 0 ? 0 : iL; 53 iL = iL > maxL ? maxL : iL; 54 55 iT = iT < 0 ? 0 : iT; 56 iT = iT > maxT ? maxT : iT; 57 58 oBox.style.marginTop = oBox.style.marginLeft = 0; 59 oBox.style.left = iL + "px"; 60 oBox.style.top = iT + "px"; 61 62 aPos.push({x:iL, y:iT}) 63 64 status(); 65 66 return false 67 }; 68 69 //鼠標釋放, 結束拖拽 70 document.onmouseup = window.onblur = oH2.onlosecapture = function () 71 { 72 bDrag = false; 73 oH2.releaseCapture && oH2.releaseCapture(); 74 status() 75 }; 76 77 //回放拖動軌跡 78 oA.onclick = function () 79 { 80 if (aPos.length == 1) return; 81 var timer = setInterval(function () 82 { 83 var oPos = aPos.pop(); 84 oPos ? (oBox.style.left = oPos.x + "px", oBox.style.top = oPos.y + "px", status()) : clearInterval(timer) 85 }, 30); 86 87 this.focus = false;//去除鏈接虛線 88 89 return false 90 }; 91 92 //阻止冒泡 93 oA.onmousedown = function (event) 94 { 95 (event || window.event).cancelBubble = true 96 }; 97 98 //監聽狀態函數 99 function status () 100 { 101 aSpan[0].innerHTML = bDrag; 102 aSpan[1].innerHTML = oBox.offsetTop; 103 aSpan[2].innerHTML = oBox.offsetLeft 104 } 105 106 //初始調用 107 status() 108 }; 109 </script> 110 <style>@font-face{font-family:uc-nexus-iconfont;src:url(chrome-extension://pogijhnlcfmcppgimcaccdkmbedjkmhi/res/font_9qmmi8b8jsxxbt9.woff) format('woff'),url(chrome-extension://pogijhnlcfmcppgimcaccdkmbedjkmhi/res/font_9qmmi8b8jsxxbt9.ttf) format('truetype')}</style></head> 111 <body> 112 <div id="box" style="margin-left: 0px; margin-top: 0px; left: 385px; top: 229px;"> 113 <h2><a href="javascript:;">點擊回放拖動軌跡</a></h2> 114 <p><strong>Drag:</strong><span>false</span></p> 115 <p><strong>offsetTop:</strong><span>229</span></p> 116 <p><strong>offsetLeft:</strong><span>385</span></p> 117 </div> 118 119 120 <div></div></body></html>