setCapture函数的运用

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>

 

posted @ 2017-05-02 21:04  水流目  阅读(4539)  评论(0)  编辑  收藏  举报