1. setCapture 简介

setCapture可以将鼠标事件锁定在指定的元素上，当元素捕获了鼠标事件后，该事件只能作用在当前元素上。

以下情况会导致事件锁定失败：

当窗口失去焦点时，锁定的事件，自动就会取消。
alert也会导致事件的锁定取消。解决办法是在alert之后再次锁定。
鼠标右键也会导致事件解锁。

setCapture只可以作用于以下事件：

onclick
ondblclick
onmousedown
onmouseup
onmouseover
onmouseout

setCapture不可作用于键盘等其它事件，只能作用于鼠标事件。主要用于: onmouseover 与 onmouseout 事件。

* setCapture该法是IE浏览器专有。

2. setCapture 使用格式

setCapture 有一个布尔值参数，用于设置是否捕获其子元素的鼠标事件。
　　当参数是ture时，当前元素会捕获其内的所有子元素的鼠标事件，即指定元素内的子元素不会触发鼠标事件，也就是当前元素内的子元素与当前元素外的元素一致。
　　当参数为false时，当前元素不会捕获该其内的所有子元素的鼠标事件。容器内的对象能够正常地触发事件和取消冒泡。

示例： currElement.setCapture(boolean)

3. setCapture - Simple - Demo

   <script>

     var oBox = document.getElementById('infor'),

         oBtn = document.getElementsByTagName('button')[0];

     oBtn.onmousedown=function(){

         this.setCapture(true);

     }

     oBtn.onmouseover = function(){

       oBox.innerHTML+='onmouseover | ';

     }

     oBtn.onmouseout = function(){

       oBox.innerHTML+='onmouseout | ';

     }

     oBtn.onmouseup = function(){

       oBox.innerHTML+='onmouseup | ';

     }

   </script>

4. setCapture 总结

setCapture()用于事件的锁定，对应的还有一个解锁事件方法 releaseCapture()方法，releaseCapture()可以为指定的元素解除事件锁定。它们俩必须成对使用。
setCapture()方法主要用于高级的拖动技术，这是因为在IE下，当我们在要拖动的元素上，在按下鼠标按钮然后拖动时，当拖动过快，或者是超出浏览器的文档窗口时，拖动对象身上的onmousedown就会失效。在Chrome我们可以为doucment绑定onmouseout来判断是否发生这样的情况，但是IE下面却行不通，所以最好的解决办法就时为要拖动的元素对象锁定鼠标事件，在拖动后在解除事件锁定。

具体使用案例：http://www.cnblogs.com/HCJJ/p/5834559.html

另外在Firefox中有相似的功能，它们分别是：

· captureEvents(Event.eventType)
· releaseEvents(Event.eventType)

最后在学习的过程中我对setCapture还存在的几个疑问，希望以后能得到高手的指点：

　　1. 为什么为button元素锁定事件后，没有在button元素上移动，但是还会触发onmouseover与onmouseout事件。

　　　　[ 具体代码见上面的DEMO ]

　　2.在onclick事件中，没法永久将鼠标事件锁定在指定元素上。

 <!DOCTYPE html>

 <html lang="en">

   <head>

     <meta charset="UTF-8">

     <title>setCapture - Simple - Demo</title>

   </head>

   <body>

       <button>click</button>

   </body>

 </html>

   <script>

     var oBtn = document.getElementsByTagName('button')[0];

     oBtn.onclick=function(){

       this.setCapture();

     }

   </script>

　　然后第二次点击页面后就会发现锁定自动取消。

参考资料：

https://developer.mozilla.org/zh-CN/docs/Web/API/element/setCapture
http://www.cnblogs.com/lln7777/archive/2012/03/20/2408148.html

setCapture、releasCapture 浅析的更多相关文章

SQL Server on Linux 理由浅析
SQL Server on Linux 理由浅析今天的爆炸性新闻<SQL Server on Linux>基本上在各大科技媒体上刷屏了大家看到这个新闻都觉得非常震精,而美股,今天微软开 ...
【深入浅出jQuery】源码浅析--整体架构
最近一直在研读 jQuery 源码,初看源码一头雾水毫无头绪,真正静下心来细看写的真是精妙,让你感叹代码之美. 其结构明晰,高内聚.低耦合,兼具优秀的性能与便利的扩展性,在浏览器的兼容性(功能缺陷.渐 ...
高性能IO模型浅析
高性能IO模型浅析服务器端编程经常需要构造高性能的IO模型,常见的IO模型有四种: (1)同步阻塞IO(Blocking IO):即传统的IO模型. (2)同步非阻塞IO(Non-blocking ...
netty5 HTTP协议栈浅析与实践
一.说在前面的话前段时间,工作上需要做一个针对视频质量的统计分析系统,各端(PC端.移动端和 WEB端)将视频质量数据放在一个 HTTP 请求中上报到服务器,服务器对数据进行解析.分拣后从不同的 ...
Jvm 内存浅析及 GC个人学习总结
从诞生至今,20多年过去,Java至今仍是使用最为广泛的语言.这仰赖于Java提供的各种技术和特性,让开发人员能优雅的编写高效的程序.今天我们就来说说Java的一项基本但非常重要的技术内存管理了解C ...
从源码浅析MVC的MvcRouteHandler、MvcHandler和MvcHttpHandler
熟悉WebForm开发的朋友一定都知道,Page类必须实现一个接口,就是IHttpHandler.HttpHandler是一个HTTP请求的真正处理中心,在HttpHandler容器中,ASP.NET ...
【深入浅出jQuery】源码浅析2--奇技淫巧
最近一直在研读 jQuery 源码,初看源码一头雾水毫无头绪,真正静下心来细看写的真是精妙,让你感叹代码之美. 其结构明晰,高内聚.低耦合,兼具优秀的性能与便利的扩展性,在浏览器的兼容性(功能缺陷.渐 ...
浅析匿名函数、lambda表达式、闭包（closure）区别与作用
浅析匿名函数.lambda表达式.闭包(closure)区别与作用所有的主流编程语言都对函数式编程有支持,比如c++11.python和java中有lambda表达式.lua和JavaScript中 ...
word-break|overflow-wrap|word-wrap——CSS英文断句浅析
---恢复内容开始--- word-break|overflow-wrap|word-wrap--CSS英文断句浅析一问题引入今天在再次学习 overflow 属性的时候,查看效果时,看到如下结 ...

随机推荐

ASP.NET Aries 入门开发教程4：查询区的下拉配置
背景: 今天去深圳溜达了一天,刚回来,看到首页都是微软大法好,看来离.NET的春天就差3个月了~~ 回到正题,这篇的教程讲解下拉配置. 查询区的下拉配置: 1:查询框怎么配置成下拉? 在配置表头:格式 ...
菜鸟学Struts2——Interceptors
昨天学习Struts2的Convention plugin,今天利用Convention plugin进行Interceptor学习,虽然是使用Convention plugin进行零配置开发,这只是 ...
SQL Server 常用内置函数（built-in）持续整理
本文用于收集在运维中经常使用的系统内置函数,持续整理中一,常用Metadata函数 1,查看数据库的ID和Name db_id(‘DB Name’),db_name('DB ID') 2,查看对象的 ...
隐马尔科夫模型python实现简单拼音输入法
在网上看到一篇关于隐马尔科夫模型的介绍,觉得简直不能再神奇,又在网上找到大神的一篇关于如何用隐马尔可夫模型实现中文拼音输入的博客,无奈大神没给可以运行的代码,只能纯手动网上找到了结巴分词的词库,根据此 ...
再部署一个 instance 和 Local Network - 每天5分钟玩转 OpenStack（131）
上一节部署了 cirros-vm1 到 first_local_net,今天我们将再部署 cirros-vm2 到同一网络,并创建 second_local_net. 连接第二个 instance 到 ...
解决vs创建或打开C++浏览数据库文件*.sdf时发生错误的问题
VS2012, 创建或打开C++浏览数据库文件*.sdf时发生错误. IntelliSense 和浏览信息将不能用于C++项目. 请确保已安装 Microsoft SQL Server Compac ...
bootstrap-fileinput 简单使用
bootstrap-fileinput 是一款图片/文件上传 bootstrap 插件,简单示例代码: <!DOCTYPE html> <html> <head> ...
Aaron Stannard谈Akka.NET 1.1
Akka.NET 1.1近日发布,带来新特性和性能提升.InfoQ采访了Akka.net维护者Aaron Stannard,了解更多有关Akka.Streams和Akka.Cluster的信息.Aar ...
continue break 区别
在循环中有两种循环方式 continue , break continue 只是跳出本次循环, 不在继续往下走, 还是开始下一次循环 break 将会跳出整个循环, 此循环将会被终止 count = ...
OSGi规范的C#实现开源
这是大约在3-4年前完成的一个C#实现的OSGi框架,实现的过程参照了OSGi规范与与一些实现思路(感谢当时的那些资料与项目),此框架虽然仅在几个小型项目有过实际的应用,但OSGi的规范实现还是相对比 ...