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基础框架浅入剖析
Dec 27 Javascript
浅析jquery的作用与优势
Dec 02 Javascript
Javascript实现快速排序(Quicksort)的算法详解
Sep 06 Javascript
JS模拟酷狗音乐播放器收缩折叠关闭效果代码
Oct 29 Javascript
jquery采用oop模式class类的使用示例
Jan 22 Javascript
iOS和Android用同一个二维码实现跳转下载链接的方法
Sep 28 Javascript
JavaScript学习总结之正则的元字符和一些简单的应用
Jun 30 Javascript
Angular.js初始化之ng-app的自动绑定与手动绑定详解
Jul 31 Javascript
JS图片延迟加载插件LazyImgv1.0用法分析【附demo源码下载】
Sep 04 Javascript
JS中注入eval, Function等系统函数截获动态代码
Apr 03 Javascript
javascript实现导航栏分页效果
Jun 27 Javascript
vue+swiper实现左右滑动的测试题功能
Oct 30 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下通过exec获得计算机的唯一标识[CPU,网卡 MAC地址]
2011/06/09 PHP
PHP无刷新上传文件实现代码
2011/09/19 PHP
linux命令之调试工具strace的深入分析
2013/06/03 PHP
php 魔术方法详解
2014/11/11 PHP
PHP.vs.JAVA
2016/04/29 PHP
php ajax confirm 删除实例详解
2019/03/06 PHP
php设计模式之原型模式分析【星际争霸游戏案例】
2020/03/23 PHP
你需要知道的JavsScript可以做什么?
2007/06/29 Javascript
JS的千分位算法实现思路
2013/07/31 Javascript
数据分析软件之FineReport教程:[5]参数界面JS(全)
2015/08/13 Javascript
javaScript中的原型解析【推荐】
2016/05/05 Javascript
javascript实现起伏的水波背景效果
2016/05/16 Javascript
JS获取url参数、主域名的方法实例分析
2016/08/03 Javascript
JS实现拖拽的方法分析
2016/12/20 Javascript
jQuery基于xml格式数据实现模糊查询及分页功能的方法
2016/12/25 Javascript
JavaScript中的编码和解码函数
2017/02/15 Javascript
vue2中filter()的实现代码
2017/07/09 Javascript
有关vue 开发钉钉 H5 微应用 dd.ready() 不执行问题及快速解决方案
2020/05/09 Javascript
[54:58]完美世界DOTA2联赛PWL S2 LBZS vs Rebirth 第一场 11.25
2020/11/25 DOTA
Python标准库之Sys模块使用详解
2015/05/23 Python
Numpy数组转置的两种实现方法
2018/04/17 Python
Python 数据处理库 pandas 入门教程基本操作
2018/04/19 Python
pandas.DataFrame选取/排除特定行的方法
2018/07/03 Python
详解Python 爬取13个旅游城市,告诉你五一大家最爱去哪玩?
2019/05/07 Python
django云端留言板实例详解
2019/07/22 Python
Pyqt5 关于流式布局和滚动条的综合使用示例代码
2020/03/24 Python
python logging 重复写日志问题解决办法详解
2020/08/04 Python
爱尔兰电子产品购物网站:Komplett.ie
2018/04/04 全球购物
简单的JAVA编程面试题
2013/03/19 面试题
幼儿园儿童节主持词
2014/03/21 职场文书
计算机专业自荐信
2015/03/05 职场文书
区域销售经理岗位职责
2015/04/02 职场文书
2015年医院护理部工作总结
2015/04/23 职场文书
汤姆索亚历险记读书笔记
2015/06/29 职场文书
集英社今正式宣布 成立游戏公司“集英社Games”
2022/03/31 其他游戏
Python Flask实现进度条
2022/05/11 Python