Javascript教程:拖放效果研究(3)

http://www.itjxue.com  2015-08-06 23:18  来源:未知  点击次数: 

鼠标捕获

我在一个拖放实例中看到,即使鼠标移动到浏览器外面,拖放程序依然能够执行,仔细查看后发现是用了setCapture。
鼠标捕获(setCapture)是这个程序的重点,作用是将鼠标事件捕获到当前文档的指定的对象。这个对象会为当前应用程序或整个系统接收所有鼠标事件。
使用很简单:

this._Handle.setCapture();

setCapture捕获以下鼠标事件:onmousedown、onmouseup、onmousemove、onclick、ondblclick、onmouseover和onmouseout。
程序中主要是要捕获onmousemove和onmouseup事件。
msdn的介绍中还说到setCapture有一个bool参数,用来设置在容器内的鼠标事件是否都被容器捕获。
容器就是指调用setCapture的对象,大概意思就是:
参数为true时(默认)容器会捕获容器内所有对象的鼠标事件,即容器内的对象不会触发鼠标事件(跟容器外的对象一样);
参数为false时容器不会捕获容器内对象的鼠标事件,即容器内的对象可以正常地触发事件和取消冒泡。
而对于容器外的鼠标事件无论参数是什么都会被捕获,
可以用下面这个简单的例子测试一下(ie):

<html>
<body onclick="alert(2)">
<div onmousemove="alert(1)">mouseover </div>
<script>document.body.setCapture(); </script>
</body>
</html>

这里的参数是true,一开始body会捕获所有鼠标事件,即使鼠标经过div也不会触发onmousemove事件。
换成false的话,div就可以捕获鼠标事件,就能触发onmousemove事件了。

拖放结束后还要使用releaseCapture释放鼠标,这个可以放在Stop程序中:

this._Handle.releaseCapture();

setCapture是ie的鼠标捕获方法,对于ff也有对应的captureEvents和releaseEvents方法。
但这两个方法只能由window来调用,而且muxrwc说这两个方法在DOM2里已经废弃了,在ff里已经没用了。
不过ff里貌似会自动设置取消鼠标捕获,但具体的情形就不清楚了,找不到一个比较详细的介绍,谁有这方面的资料记得告诉我啊。

下面都是我的猜测,ff的鼠标捕获相当于能自动设置和释放的document.body.setCapture(false)。
因为我测试下面的程序,发现ie和ff效果是差不多的:
ie:

<html>
<body>
<div id="aa" onmouseover="alert(1)"> </div>
<script>
document.body.onmousedown=function(){this.setCapture(false)}
document.body.onmouseup=function(){this.releaseCapture()}
document.onmousemove=function(){aa.innerHTML+=1}
</script>
</body>
</html>

ff:

<html>
<body>
<div id="aa" onmouseover="alert(1)"> </div>
<script>
document.onmousemove=function(){aa.innerHTML+=1}
</script>
</body>
</html>

可惜没有权威的资料参考就只能猜猜了,还有很多还没有理解的地方以后再研究拉。

注意ff2下的鼠标捕获有一个bug,当拖放对象内部没有文本内容并拖放到浏览器外时捕获就会失效。
给拖放对象插入一个空文本,例如 <font size='1px'>&nbsp; </font>就可以解决,不过这个bug在ff3已经修正了。

(责任编辑:IT教学网)

更多

推荐Javascript/Ajax文章