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 相关文章推荐
getAsDataURL在Firefox7.0下无法预览本地图片的解决方法
Nov 15 Javascript
解析JavaScript中点号“.”的多义性
Dec 02 Javascript
使用ajaxfileupload.js实现ajax上传文件php版
Jun 26 Javascript
js计算德州扑克牌面值的方法
Mar 04 Javascript
javascript实现省市区三级联动下拉框菜单
Nov 17 Javascript
javascript中JSON.parse()与eval()解析json的区别
May 19 Javascript
新手vue构建单页面应用实例代码
Sep 18 Javascript
基于vue v-for 循环复选框-默认勾选第一个的实现方法
Mar 03 Javascript
动态内存分配导致影响Javascript性能的问题
Dec 18 Javascript
20道JS原理题助你面试一臂之力(必看)
Jul 22 Javascript
vue 地区选择器v-distpicker的常用功能
Jul 23 Javascript
微信小程序如何实现点击图片放大功能
Jan 21 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简介
2006/10/09 PHP
PHP正则表达式之定界符和原子介绍
2012/10/05 PHP
file_get_contents(&quot;php://input&quot;, &quot;r&quot;)实例介绍
2013/07/01 PHP
PHP实现支持加盐的图片加密解密
2016/09/09 PHP
jQuery 注意事项 与原因分析
2009/04/24 Javascript
jquery.validate使用攻略 第二部
2010/07/01 Javascript
关于图片按比例自适应缩放的js代码
2011/10/30 Javascript
jQuery实现渐变弹出层和弹出菜单的方法
2015/02/20 Javascript
PHP+MySQL+jQuery随意拖动层并即时保存拖动位置实例讲解
2015/10/09 Javascript
jQuery判断浏览器并动态调整select宽度的方法
2016/03/02 Javascript
JS及PHP代码编写八大排序算法
2016/07/12 Javascript
jQuery网页定位导航特效实现方法
2016/12/19 Javascript
JS字符串统计操作示例【遍历,截取,输出,计算】
2017/03/27 Javascript
vue如何通过id从列表页跳转到对应的详情页
2018/05/01 Javascript
细说Vue组件的服务器端渲染的过程
2019/05/30 Javascript
深入学习js函数的隐式参数 arguments 和 this
2019/06/24 Javascript
微信小程序实现打开并下载服务器上面的pdf文件到手机
2019/09/20 Javascript
Vue.js中使用Vuex实现组件数据共享案例
2020/07/31 Javascript
使用Python的Twisted框架实现一个简单的服务器
2015/04/16 Python
python tkinter实现界面切换的示例代码
2019/06/14 Python
Python3内置模块之base64编解码方法详解
2019/07/13 Python
深入解析神经网络从原理到实现
2019/07/26 Python
Python使用requests xpath 并开启多线程爬取西刺代理ip实例
2020/03/06 Python
Django 多对多字段的更新和插入数据实例
2020/03/31 Python
德国家具购物网站:Möbel Höffner
2019/08/26 全球购物
优秀毕业大学生推荐信
2013/11/13 职场文书
表扬信格式
2014/01/12 职场文书
应聘文员自荐信范文
2014/03/11 职场文书
《秋游》教学反思
2014/04/24 职场文书
自主招生教师推荐信
2014/05/10 职场文书
消防安全宣传标语
2014/06/07 职场文书
审计局班子四风对照检查材料思想汇报
2014/10/07 职场文书
2014年个人工作总结模板
2014/12/15 职场文书
成绩报告单家长评语
2014/12/30 职场文书
2015年员工工作总结范文
2015/04/08 职场文书
2016学习全国教书育人楷模先进事迹心得体会
2016/01/21 职场文书