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 属性的时候,查看效果时,看到如下结 ...

随机推荐

docker——容器安装tomcat
写在前面: 继续docker的学习,学习了docker的基本常用命令之后,我在docker上安装jdk,tomcat两个基本的java web工具,这里对操作流程记录一下. 软件准备: 1.jdk-7 ...
多线程爬坑之路-Thread和Runable源码解析之基本方法的运用实例
前面的文章:多线程爬坑之路-学习多线程需要来了解哪些东西?(concurrent并发包的数据结构和线程池,Locks锁,Atomic原子类) 多线程爬坑之路-Thread和Runable源码解析前面 ...
PHP赋值运算
1. 赋值运算:= ,意思是右边表达式的值赋给左边的运算数. $int1=10; $int1=$int1-6; //$int1=4 echo $int1,"<br>"; ...
Android权限管理之Permission权限机制及使用
前言: 最近突然喜欢上一句诗:"宠辱不惊,看庭前花开花落:去留无意,望天空云卷云舒." 哈哈~,这个和今天的主题无关,最近只要不学习总觉得生活中少了点什么,所以想着围绕着最近面试过 ...
Android公共title的应用
我们在开发Android应用中,写每一个页面的时候都会建一个title,不是写一个LinearLayout就是写一个RelativeLayout,久而久之就会觉得这样繁琐,尤其几个页面是只是标题不一样 ...
zookeeper源码分析之一服务端启动过程
zookeeper简介 zookeeper是为分布式应用提供分布式协作服务的开源软件.它提供了一组简单的原子操作,分布式应用可以基于这些原子操作来实现更高层次的同步服务,配置维护,组管理和命名.zoo ...
HTML5轻松实现搜索框提示文字点击消失---及placeholder颜色的设置
在做搜索框的时候无意间发现html5的input里有个placeholder属性能轻松实现提示文字点击消失功能,之前还傻傻的在用js来实现类似功能... 示例 <form action=&quo ...
代码的坏味道（18）——依恋情结(Feature Envy)
坏味道--依恋情结(Feature Envy) 特征一个函数访问其它对象的数据比访问自己的数据更多. 问题原因这种气味可能发生在字段移动到数据类之后.如果是这种情况,你可能想将数据类的操作移动到这 ...
PHP设计模式（二）工厂方法模式（Factory Method For PHP）
简单工厂简述: 简单工厂模式实现了生产产品类的代码跟客户端代码分离,在工厂类中你可以添加需要生成长跑的逻辑代码(new 产品类),但是问题来了,优秀的代码是符合"开闭原则"如果你要 ...
Android 微信第三方登录（个人笔记）
今天在写微信登录,花了半天时间搞定.然后写下自己的笔记,希望帮助更多的人...欢迎各位指教. 微信授权登录,官方说的不是很清楚.所以导致有一部分的坑. 微信注册应用平台的应用签名,下载微信签名生成工 ...