flash实现拖拽时遇到的问题
我们实现拖拽功能,一般是通过监听拖拽对象的mouseDown事件来开始拖动,然后监听拖拽对象的mouseUp事件来停止拖动。
有经验的人会发现,如果我们快速的拖动物体到舞台以外地方时,会监听不到拖拽对象的mouseUp事件,所以如果你仅仅监听拖拽
对象的mouseUp事件的话,必然会出现快速移动下拖拽会异常的现象。我们先做一个例子来测试下:
1.在Flash IDE中新建一个元件(随便画个框就可以),将其放在舞台上,命名为aa;
2.选择第一帧,按F9弹出脚本编辑面板,在面板中输入以下代码:
aa.addEventListener(MouseEvent.MOUSE_DOWN,startDragHandler);
aa.addEventListener(MouseEvent.MOUSE_UP,stopDragHandler);
stage.addEventListener(MouseEvent.MOUSE_UP,stopDragHandler);
function startDragHandler(e:MouseEvent):void
{
aa.startDrag();
}
function stopDragHandler(e:MouseEvent):void
{
trace("target:"+e.target.name+"; currentTarget:"+e.currentTarget.name);
trace("aa:"+aa.x+","+aa.y);
if((aa.x+aa.width)>stage.stageWidth)
{
aa.x=stage.stageWidth-aa.width;
}
if((aa.y+aa.height)>stage.stageHeight)
{
aa.y=stage.stageHeight-aa.height;
}
if(aa.x<0)
{
aa.x=0;
}
if(aa.y<0)
{
aa.y=0;
}
aa.stopDrag();
}
3.测试,Ctrl+Enter编译成swf,然后测试各种结果
(1)正常情况,在场景范围内拖动,只要在没有超出场景范围时放下鼠标,我们会发现输出以下结果
target:aa; currentTarget:aa
aa:196,200
target:aa; currentTarget:null
aa:196,200
从以上我们可以发现,我们分别执行了两次mouseUp的监听事件的处理函数,其实这个是因为拖拽对象aa和舞台场景stage都监听了
mouseUp事件,所以触发了两次运行。
(2)非正常情况下,在场景范围内快速拖动,当鼠标释放是在超出场景范围的区域时,我们可以看到以下执行结果:
target:null; currentTarget:null
aa:488,663
从结果中我们可以发现,当超出场景范围时,拖拽对象aa是监听不到鼠标释放mouseUp的事件的,所以才会出现我们在平常做拖拽的时候所遇到的那个奇怪的bug——无法触发对象的mouseUp事件,看到这里大家应该能够想到解决这个bug的方法了,那就是在监听拖拽对象的mouseUp事件外还需要监听stage的mouseUp事件,来辅助解决这个问题。
当然这是我想到的一种解决方法,如果你们有更好的解决方法,一定要告诉我哦^_^!