setCapture、releasCapture 浅析
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 属性的时候,查看效果时,看到如下结 ...
随机推荐
- Entity Framework Core 1.1 升级通告
原文地址:https://blogs.msdn.microsoft.com/dotnet/2016/11/16/announcing-entity-framework-core-1-1/ 翻译:杨晓东 ...
- UWP学习目录整理
UWP学习目录整理 0x00 可以忽略的废话 10月6号靠着半听半猜和文字直播的补充看完了微软的秋季新品发布会,信仰充值成功,对UWP的开发十分感兴趣,打算后面找时间学习一下.谁想到学习的欲望越来越强 ...
- js复杂对象和简单对象的简单转化
var course = { teacher :{ teacherId:001, teacherName:"王" }, course : { courseId : 120, cou ...
- <译>通过PowerShell工具跨多台服务器执行SQL脚本
有时候,当我们并没有合适的第三方工具(大部分需要付费)去管理多台数据库服务器,那么如何做最省力.省心呢?!Powershell一个强大的工具,可以很方便帮到我们处理日常的数据库维护工作 .简单的几步搞 ...
- addTwoNumbers
大神的代码好短,自己写的120多行=_= 各种判断 ListNode *f(ListNode *l1, ListNode *l2) { ListNode *p1 = l1; ListNode *p2 ...
- ResponsibleChain(责任链模式)
/** * 责任链模式 * @author TMAC-J * 老板讲任务交给CTO,CTO自然不会亲自去做,又把人物分配给项目经理,项目经理再把任务分配给组长,组长再分配给个人 * 如果中途哪个环节出 ...
- RabbitMQ + PHP （三）案例演示
今天用一个简单的案例来实现 RabbitMQ + PHP 这个消息队列的运行机制. 主要分为两个部分: 第一:发送者(publisher) 第二:消费者(consumer) (一)生产者 (创建一个r ...
- ASP.NET MVC 5 系列 学习笔记 目录 (持续更新...)
前言: 记得当初培训的时候,学习的还是ASP.NET,现在回想一下,图片水印.统计人数.过滤器....HttpHandler是多么的经典! 不过后来接触到了MVC,便立马爱上了它.Model-View ...
- 记：MySQL 5.7.3.0 安装 全程截图
前言: 下一个班快讲MySQL数据库了,正好把服务器里面的MySQL卸了重装了一下. 截个图,作为笔记.也正好留给需要的朋友们. 目录: 下载软件 运行安装程序 安装程序欢迎界面 许可协议 查找更新 ...
- Redis配置文件redis.conf
1.地址 2.Units单位 1 配置大小单位,开头定义了一些基本的度量单位,只支持bytes,不支持bit 2 对大小写不敏感 3.includes包含