学JQ也有一段时间了，想自己写个鼠标拖动层移动的效果（很简单，只是为了练习而已）于是就写下了下面的代码
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <style> 5 body{ background-color: #eef; }div{ padding: 20px; } 6 #abc{ 7 width: 70px; 8 height: 70px; 9 position: absolute; 10 background-color: #000000; 11
12 } 13 #abc:hover{ 14 cursor:default; 15 } 16 </style> 17 <script src="jquery-1.8.3.min.js"></script> 18 </head> 19 <body> 21 <div id="abc"></div> 22 <script> 23 $(function(){ 24 var md=false; 25 var left; 26 var top; 27 var a; 28 var b; 29 $('#abc').mousedown(function(e){ 30 md=true; 31 a=e.clientX - $(this).offset().left; 32 b=e.clientY - $(this).offset().top; 33
34 }); 35 $('#abc').mouseup(function(){ 36 md=false; 37 }); 38 $(document).mousemove(function(e){ 39 left=e.clientX-a; 40 top=e.clientY-b; 41 if(md){ 42 $('#abc').css({left:left,top:top}); 43 } 44 45 }); 46 }); 47 </script> 48 </body> 49 </html>
可是问题来了，那就是当我用鼠标拖动层的时候在chrome下鼠标变成了文本选择样式，也就是cursor:text，通过该CSS是没有办法改变的（在IE下没有问题）。然以后找啊找找啊找，终于找到了答案，那就是在$("#abc").mousedown的时候return false;一下就可以解决问题了，代码如下:
1 $('#abc').mousedown(function(e){ 2 md=true; 3 a=e.clientX - $(this).offset().left; 4 b=e.clientY - $(this).offset().top; 5 return false; 6 });
原因是取消绑定的事件，但是这里我一直不知道是为什么，因为在鼠标点击的时候样子还是原来的饿啊，应该是在鼠标移动的时候才出现的这个原因，那为什么不是在mousemove的时候return false，而是在mousedown的时候return false呢？求高手解答！