将事件扩展向窗口以外

通常,当我们制造移动效果时.当你正在拖动一个对象时,鼠标脱离了当前窗口.并且在窗口之外放开了鼠标,再回到窗口当中.会发现,当鼠标移动时.之前拖动的那个对象还在继续移动.
这是因为被移动的元素不知道你在窗口外面已经放下了鼠标.所以依然处于可以移动状态的缘故.

那有好的解决办法吗?答案是肯定的:用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层的事件就被绑定到整个文档对象上去了.这时,你会发现你所托动的层可以不受限制的到处拖动.
你可以尝试着把窗口缩小成屏幕的一半,当你按下鼠标,开始拖动这个层时.当你的鼠标一起移动到窗口以外的区域,层依然在你的控制下在移动着.
---------------------------------------------------------------------
(原创)

评论

1 楼 doltter 2008-06-04  

好文章。。。