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>