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

 1   <script>
 2     var oBox = document.getElementById(‘infor‘),
 3         oBtn = document.getElementsByTagName(‘button‘)[0];
 4
 5     oBtn.onmousedown=function(){
 6         this.setCapture(true);
 7     }
 8     oBtn.onmouseover = function(){
 9       oBox.innerHTML+=‘onmouseover | ‘;
10     }
11     oBtn.onmouseout = function(){
12       oBox.innerHTML+=‘onmouseout | ‘;
13     }
14     oBtn.onmouseup = function(){
15       oBox.innerHTML+=‘onmouseup | ‘;
16     }
17
18   </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事件中,没法永久将鼠标事件锁定在指定元素上。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3   <head>
 4     <meta charset="UTF-8">
 5     <title>setCapture - Simple - Demo</title>
 6   </head>
 7   <body>
 8       <button>click</button>
 9   </body>
10 </html>
11   <script>
12     var oBtn = document.getElementsByTagName(‘button‘)[0];
13     oBtn.onclick=function(){
14       this.setCapture();
15     }
16   </script>

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

参考资料:

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

时间: 2024-12-26 00:23:37

setCapture、releasCapture 浅析的相关文章

HTML中setCapture、releaseCapture 使用方法浅析

本文给大家简单介绍了下html中的高级拖动技术setCapture.releaseCapture的使用方法,有需要的小伙伴可以参考下 1. setCapture 简介 setCapture可以将鼠标事件锁定在指定的元素上,当元素捕获了鼠标事件后,该事件只能作用在当前元素上. 以下情况会导致事件锁定失败: 当窗口失去焦点时,锁定的事件,自动就会取消. alert也会导致事件的锁定取消.解决办法是在alert之后再次锁定. 鼠标右键也会导致事件解锁. setCapture只可以作用于以下事件: on

Python之encode与decode浅析

 Python之encode与decode浅析 在 python 源代码文件中,如果你有用到非ASCII字符,则需要在文件头部进行字符编码的声明,声明如下: # code: UTF-8 因为python 只检查 #.coding 和编码字符串,为了美观等原因可以如下写法: #-*-coding:utf-8-*- 常见编码介绍: GB2312编码:适用于汉字处理.汉字通信等系统之间的信息交换. GBK编码:是汉字编码标准之一,是在 GB2312-80 标准基础上的内码扩展规范,使用了双字节编码.

浅析PHP的开源产品二次开发的基本要求

浅析PHP的开源产品二次开发的基本要求 第一, 基本要求:HTML(必须要非常熟悉),PHP(能看懂代码,能写一些小系统,如:留言板,小型CMS),Mysql(至少会一种数据库),Javascript(能看懂,能改现成的一些代码),Div+Css(能进行界面的调整,明白CSS是怎么使用的) 第二, 熟悉开源产品的使用,比如 Dedecms,你要知道怎么登录,怎么新建栏目,怎么添加文章,模板标签的使用方法,模型的概念和使用方法等等一些功能 第三, 要熟悉这个开源产品的数据库结构,还要理解里面核心文

word-break|overflow-wrap|word-wrap——CSS英文断句浅析

---恢复内容开始--- word-break|overflow-wrap|word-wrap--CSS英文断句浅析 一 问题引入 今天在再次学习 overflow 属性的时候,查看效果时,看到如下结果,内容在 div 中国换行了,可是两个 P 元素的内容并没有换行,搜索一番没有找到系统的答案,截图到群里请教大神,才知道是英文断句的问题,但是还是不太明白.之前没有遇到这种情况,为了彻底搞清楚,英文断句,又开始学习英文断句到底是怎么回事. 二 换行 每种语言里都有换行,就中文而言,我们最小语言单位

浅析vanish

浅析 VANISH --一种cache 第一部分:理解vanish的准备工作 1.对CDN的小剖析 CDN  content  delivery  network  内容分发(推送)网络,是在现有的Internet中增加一层新的网络架构,将网络内容发布到最接近用户的网络边缘(边缘服务器),使用户最近取得所需内容,解决网络拥挤状态,提高用户访问网站的速度. CDN网络架构主要有两部分组成,中心和边缘两部分,中心指CDN网管中心和DNS重定向解析中心,负责全局负载均衡.边缘主要指异地节点,CDN分发

健康,home? [java的内存浅析]

健康,home? [java的内存浅析] 摘要: 原创出处: http://www.cnblogs.com/Alandre/ 泥沙砖瓦浆木匠 希望转载,保留摘要,谢谢! 乐观上上,how can other kno u,u r yourself!I must be strong and carry on. -泥沙砖瓦浆木匠 一.闲谈下 201407月记着那时候身体垮了下来,呵呵.想说,对自己的说,也是对大家的负责吧.那时候胸疼胸闷,然后几乎累垮了,我还坚持了一星期,那一星期真的迷迷糊糊.完全不能

Mysql查询优化器浅析

--Mysql查询优化器浅析 -----------------------------2014/06/11 1 定义 Mysql查询优化器的工作是为查询语句选择合适的执行路径.查询优化器的代码一般是经常变动的,这和存储引擎不太一样.因此,需要理解最新版本的查询优化器是如何组织的,请参考相应的源代码.整体而言,优化器有很多相同性,对mysql一个版本的优化器做到整体掌握,理解起mysql新版本以及其他数据库的优化器都是类似的. 优化器会对查询语句进行转化,转化等价的查询语句.举个例子,优化器会将

Volley框架源码浅析(一)

尊重原创http://blog.csdn.net/yuanzeyao/article/details/25837897 从今天开始,我打算为大家呈现关于Volley框架的源码分析的文章,Volley框架是Google在2013年发布的,主要用于实现频繁而且粒度比较细小的Http请求,在此之前Android中进行Http请求通常是使用HttpUrlConnection和HttpClient进行,但是使用起来非常麻烦,而且效率比较地下,我想谷歌正式基于此种原因发布了Volley框架,其实出了Voll

C语言中文件打开模式(r/w/a/r+/w+/a+/rb/wb/ab/rb+/wb+/ab+)浅析

C语言文件打开模式浅析 在C语言的文件操作语法中,打开文件文件有以下12种模式,如下图: 打开模式  只可以读   只可以写  读写兼备 文本模式 r w a r+ w+ a+ 二进制模式 rb wb ab  rb+ (r+b)   wb+ (w+b)   ab+ (a+b)  其中,二进制模式与文本模式操作相似,只不过是以二进制流的形式读写而已,下面以文本模式为例分析: 1."r" 模式: 1.1 打开文件进行“只读”操作,即只能从文件读取内容. 1.2 若欲操作的文件不存在,则打开