通常,当我们制造移动效果时.当你正在拖动一个对象时,鼠标脱离了当前窗口.并且在窗口之外放开了鼠标,再回到窗口当中.会发现,当鼠标移动时.之前拖动的那个对象还在继续移动.
这是因为被移动的元素不知道你在窗口外面已经放下了鼠标.所以依然处于可以移动状态的缘故.
那有好的解决办法吗?答案是肯定的:用setCapture()方法.
setCapture():将某个方法的事件绑定到整个文档.
它的用法在DHTML手册里面都有记载:
object.setCapture();
相应的,object.releaseCapture()用于将object所绑定的事件释放掉
其中,object为要将事件绑定到文档的对象.
例如:
这样,当你在id为test的层上按下鼠标时,test层的事件就被绑定到整个文档对象上去了.这时,你会发现你所托动的层可以不受限制的到处拖动.
你可以尝试着把窗口缩小成屏幕的一半,当你按下鼠标,开始拖动这个层时.当你的鼠标一起移动到窗口以外的区域,层依然在你的控制下在移动着.
---------------------------------------------------------------------
(原创)
这是因为被移动的元素不知道你在窗口外面已经放下了鼠标.所以依然处于可以移动状态的缘故.
那有好的解决办法吗?答案是肯定的:用setCapture()方法.
setCapture():将某个方法的事件绑定到整个文档.
它的用法在DHTML手册里面都有记载:
object.setCapture();
相应的,object.releaseCapture()用于将object所绑定的事件释放掉
其中,object为要将事件绑定到文档的对象.
例如:
<div id="test" style="position:absolute;width:200;height:300;background-color:red">
我要被移动
</div>
<script>
//**//ham//**//
function $(id){return document.getElementById(id);}
window.onload=function(){
$(test).onmousedown=MouseDown;
$(test).onmousemove=MouseMove;
$(test).onmouseup=MouseUp;
}
var canMove=false;
function MouseDown(){
//在鼠标按下时,将$(test)的事件绑定到整个文档
$(test).setCapture()
canMove=true;
...
...
}
function MouseMove(){
if(canMove){
//移动层
...
...
}
}
function MouseUp(){
//鼠标放开之后,将$(test)所绑定的事件释放.
$(test).releaseCapture();
canMove=true;
...
...
}
</script>
这样,当你在id为test的层上按下鼠标时,test层的事件就被绑定到整个文档对象上去了.这时,你会发现你所托动的层可以不受限制的到处拖动.
你可以尝试着把窗口缩小成屏幕的一半,当你按下鼠标,开始拖动这个层时.当你的鼠标一起移动到窗口以外的区域,层依然在你的控制下在移动着.
---------------------------------------------------------------------
(原创)