Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

useCapture与setCapture完全是两回事

  本来是在网络上搜索一些关于setCapture在Chrome中的兼容问题的。但是出现的都是同一篇文章被转来转去,也许是因为年代太久远,那篇文章中完全把useCapture与setCapture混为一谈了。这当然是不对的!于是苦逼的没找到兼容解决方法,却要来说明这个问题。
  网络上都是元素拖动效果的实现例子,它们企图使用captureEvents来替代setCapture。这是毫无意义的!captureEvents目前而言是个已经废弃了的方法,在很久以前确实也活跃过一段时间,但是它的行为和setCapture完全不同。captureEvents只是在addEventListener流行之前来提供的解决useCapture的方法而已。现在只需要给addEventListener第三个参数设置为true即可让事件useCapure。这个useCapture的行为我在以前的文章(事件的Capture传递与冒泡传递)中已经说过了。useCapture只是一个和冒泡事件是类似的东西,这篇就不详细介绍它了。主要是说说setCapture的行为到底是什么。
  setCapture最初是IE的东西,或者说直到Firefox4之前都是IEOnly的。微软在IE上实现这个方法之前它就已经是一个Win32API(MSDN setCapture)了,只是把这个方法连名字都不改丢进IE中而已。这个方法也确实很好用,只是W3C觉得它不安全就不对它标准化了。但是Firefox在第4版本时候有引入它(MDN setCapture),所以现在的情况是Chrome被孤立了。我找了一晚上也没找到相应的解决办法,所以这个问题就只能暂时纠结着。
  setCapture的功能是把一个元素的鼠标事件响应范围扩大到整个桌面而不被限制在于浏览器中更不被限制在文档上。对于一些拖拽功能的实现它是很有效的。这个方法并没有因为是系统级的就失去安全性,Firefox中对它的实现是只能用在mousedown中,而且操作对象仅限事件的触发对象,所以它只能用于拖拽的实现。IE中的setCapture倒不仅限于mousedown,但是如果不知在mousedown中设置的话事件范围只会被扩大到整个浏览器而不是整个桌面。而且当设置的元素触发mouseup时就会自动释放掉之前的setCapture,整个过程在IE上会触发losecapture事件,Firefox上貌似没有这个事件。下面来做一些测试
<style>
#panel {
  border:1px solid #CCC;width:100px;height:100px;
  text-align:center;line-height:100px;
}
</style>
<div id="panel"></div>
<script>
onload=function(){
  panel.setCapture();
  panel.onmousemove=function(e){
    panel.innerHTML=e.clientX+","+e.clientY;
  };
};
</script>
  上面这个代码在Firefox中只有鼠标在panel上移动时才会显示坐标。而IE中,只要鼠标没做点击,移动到IE窗口的任何位置都可以显示坐标。这就是因为IE支持mousedown之外设置setCapture。但是如果点击之后由于触发了mouseup就也会触发losecapture,导致不能再把mousemove事件在整个IE窗口中触发。接着把上面代码的JS部分改成这样
onload=function(){
  panel.onmousedown=function(){
    panel.setCapture();
  };
  panel.onmousemove=function(e){
    panel.innerHTML=e.clientX+","+e.clientY;
  };
};
  这就是在mousedown事件中调用的setCapture。此时无论是IE还是Firefox,只要鼠标先点击panel来触发mousedown,在鼠标松开之前mousemove就可以在整个桌面上触发,即使鼠标离开了浏览器范围。这意味着拖拽时可以不受浏览器范围的约束。所以我觉得setCapture是个很好用的方法,但目前Chrome还没兼容上,至于Opera等其它浏览器我现在没装就没测试了。
网名:
54.144.24.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^