HTML中setCapture、releaseCapture 使用方法浅析


Posted in Javascript onSeptember 25, 2016

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下面却行不通,所以最好的解决办法就时为要拖动的元素对象锁定鼠标事件,在拖动后在解除事件锁定。

具体使用案例:https://3water.com/article/93446.htm

另外在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>

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

Javascript 相关文章推荐
JQuery Ajax通过Handler访问外部XML数据的代码
Jun 01 Javascript
jquery 新建的元素事件绑定问题解决方案
Jun 12 Javascript
javascript:void(0)是什么意思及href=#与href=javascriptvoid(0)的区别
Nov 13 Javascript
jQuery数据类型小结(14个)
Jan 08 Javascript
jquery trigger函数执行两次的解决方法
Feb 29 Javascript
深入理解JavaScript中的对象复制(Object Clone)
May 18 Javascript
浅谈Emergence.js 检测元素可见性的 js 插件
Nov 18 Javascript
react-navigation之动态修改title的内容
Sep 26 Javascript
JavaScript中var的重要性实例分析
Jul 09 Javascript
js实现图片实时时钟
Jan 15 Javascript
JavaScript实现打砖块游戏
Feb 25 Javascript
分享一款超好用的JavaScript 打包压缩工具
Apr 26 Javascript
jQuery的deferred对象使用详解
Sep 25 #Javascript
简单谈谈Vue 模板各类数据绑定
Sep 25 #Javascript
D3.js实现直方图的方法详解
Sep 25 #Javascript
关于JS中二维数组的声明方法
Sep 24 #Javascript
js日期相关函数dateAdd,dateDiff,dateFormat等介绍
Sep 24 #Javascript
浅谈JS中的!=、== 、!==、===的用法和区别
Sep 24 #Javascript
让DIV的滚动条自动滚动到最底部的3种方法(推荐)
Sep 24 #Javascript
You might like
php 远程图片保存到本地的函数类
2008/12/08 PHP
PHP explode()函数用法、切分字符串
2012/10/03 PHP
基于win2003虚拟机中apache服务器的访问
2017/08/01 PHP
PHP实现redis限制单ip、单用户的访问次数功能示例
2018/06/16 PHP
php+redis实现消息队列功能示例
2019/09/19 PHP
让div层随鼠标移动的实现代码 ie ff
2009/12/18 Javascript
JS 类型转换常见方法小结
2010/05/31 Javascript
jQuery validate 中文API 附validate.js中文api手册
2010/07/31 Javascript
解决火狐浏览器下JS setTimeout函数不兼容失效不执行的方法
2012/11/14 Javascript
js select option对象小结
2013/12/20 Javascript
JavaScript中逗号运算符介绍及使用示例
2015/03/13 Javascript
Backbone.js的Hello World程序实例
2015/06/19 Javascript
jQuery对象的链式操作用法分析
2016/05/10 Javascript
浅谈js中的引用和复制(传值和传址)
2016/09/18 Javascript
详解Vue组件实现tips的总结
2017/11/01 Javascript
小程序清理本地缓存的方法
2018/08/17 Javascript
vuex 解决报错this.$store.commit is not a function的方法
2018/12/17 Javascript
SublimeText 2编译python出错的解决方法(The system cannot find the file specified)
2013/11/27 Python
Python遍历某目录下的所有文件夹与文件路径
2018/03/15 Python
python 不以科学计数法输出的方法
2018/07/16 Python
PyQt5基本控件使用详解:单选按钮、复选框、下拉框
2019/08/05 Python
Python 利用邮件系统完成远程控制电脑的实现(关机、重启等)
2019/11/19 Python
PyCharm 2019.3发布增加了新功能一览
2019/12/08 Python
解决pycharm编辑区显示yaml文件层级结构遇中文乱码问题
2020/04/27 Python
keras自定义损失函数并且模型加载的写法介绍
2020/06/15 Python
python中用ctypes模拟点击的实例讲解
2020/11/26 Python
canvas像素画板的实现代码
2018/11/21 HTML / CSS
英国50岁以上人群的交友网站:Ourtime
2018/03/28 全球购物
基层党组织公开承诺书
2014/03/28 职场文书
车辆工程专业求职信
2014/04/28 职场文书
开展批评与自我批评发言稿
2014/10/16 职场文书
少先队工作总结2015
2015/05/13 职场文书
有关水浒传的读书笔记
2015/06/25 职场文书
学习《中小学教师职业道德规范》心得体会
2016/01/18 职场文书
pandas求平均数和中位数的方法实例
2021/08/04 Python
idea下配置tomcat避坑详解
2022/04/12 Servers