在chrome下鼠标拖动层变文本形状的问题

学JQ也有一段时间了,想自己写个鼠标拖动层移动的效果(很简单,只是为了练习而已)于是就写下了下面的代码

在chrome下鼠标拖动层变文本形状的问题
 <!DOCTYPE html>
<html>
<head>
<style>
body{ background-color: #eef; }div{ padding: 20px; }
#abc{
width: 70px;
height: 70px;
position: absolute;
background-color: #000000;

}
#abc:hover{
cursor:default;
}
</style>
<script src="jquery-1.8.3.min.js"></script>
</head>
<body>
<div id="abc"></div>
<script>
$(function(){
var md=false;
var left;
var top;
var a;
var b;
$('#abc').mousedown(function(e){
md=true;
a=e.clientX - $(this).offset().left;
b=e.clientY - $(this).offset().top;

});
$('#abc').mouseup(function(){
md=false;
});
$(document).mousemove(function(e){
left=e.clientX-a;
top=e.clientY-b;
if(md){
$('#abc').css({left:left,top:top});
} });
});
</script>
</body>
</html>
在chrome下鼠标拖动层变文本形状的问题

可是问题来了,那就是当我用鼠标拖动层的时候在chrome下鼠标变成了文本选择样式,也就是cursor:text,通过该CSS是没有办法改变的(在IE下没有问题)。然以后找啊找找啊找,终于找到了答案,那就是在$("#abc").mousedown的时候return false;一下就可以解决问题了,代码如下:

 $('#abc').mousedown(function(e){
md=true;
a=e.clientX - $(this).offset().left;
b=e.clientY - $(this).offset().top;
return false;
});

原因是取消绑定的事件,但是这里我一直不知道是为什么,因为在鼠标点击的时候样子还是原来的饿啊,应该是在鼠标移动的时候才出现的这个原因,那为什么不是在mousemove的时候return false,而是在mousedown的时候return false呢?求高手解答!

上一篇:构建自己的PHP框架--构建模版引擎(2)


下一篇:Words to Use Instead of "Very"