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 相关文章推荐
JavaScript 模式之工厂模式(Factory)应用介绍
Nov 15 Javascript
JavaScript中的this关键字介绍与使用实例
Jun 21 Javascript
jQuery实现转动随机数抽奖效果的方法
May 21 Javascript
页面get请求 中文参数方法乱码问题的快速解决方法
May 31 Javascript
JavaScript中数组的22种方法必学(推荐)
Jul 20 Javascript
JS+HTML5实现的前端购物车功能插件实例【附demo源码下载】
Oct 17 Javascript
ES6正则的扩展实例详解
Apr 25 Javascript
浅谈Node.js之异步流控制
Oct 25 Javascript
Vue 第三方字体图标引入 Font Awesome的方法
Sep 28 Javascript
详解js删除数组中的指定元素
Oct 31 Javascript
JS 音频可视化插件Wavesurfer.js的使用教程
Oct 31 Javascript
手把手带你搭建一个node cli的方法示例
Aug 07 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
解决phpmyadmin中缺少mysqli扩展问题的方法
2013/05/06 PHP
PHP对表单提交特殊字符的过滤和处理方法汇总
2014/02/18 PHP
使用PHP实现微信摇一摇周边红包
2016/01/04 PHP
PHP的Yii框架中View视图的使用进阶
2016/03/29 PHP
JsDom 编程小结
2011/08/09 Javascript
jquery按回车提交数据的代码示例
2013/11/05 Javascript
使用Nodejs开发微信公众号后台服务实例
2014/09/03 NodeJs
利用a标签自动解析URL分析网址实例
2014/10/20 Javascript
node.js中的http.response.addTrailers方法使用说明
2014/12/14 Javascript
JS实现霓虹灯文字效果的方法
2015/08/06 Javascript
HTML5之WebSocket入门3 -通信模型socket.io
2015/08/21 Javascript
ES6中class类用法实例浅析
2017/04/06 Javascript
Node.js使用Angular简单示例
2018/05/11 Javascript
json数据传到前台并解析展示成列表的方法
2018/08/06 Javascript
vue如何实现动态加载脚本
2020/02/05 Javascript
解决vue中使用less/sass及使用中遇到无效的问题
2020/10/24 Javascript
[51:29]完美世界DOTA2联赛循环赛 Matador vs Forest BO2第一场 11.05
2020/11/05 DOTA
举例区分Python中的浅复制与深复制
2015/07/02 Python
Python调用C++,通过Pybind11制作Python接口
2018/10/16 Python
解决Python selenium get页面很慢时的问题
2019/01/30 Python
Python 堆叠柱状图绘制方法
2019/07/29 Python
基于python3.7利用Motor来异步读写Mongodb提高效率(推荐)
2020/04/29 Python
Python使用pdb调试代码的技巧
2020/05/03 Python
PyCharm安装PyQt5及其工具(Qt Designer、PyUIC、PyRcc)的步骤详解
2020/11/02 Python
一款基于css3的列表toggle特效实例教程
2015/01/04 HTML / CSS
HTML5实现QQ聊天气泡效果
2017/06/26 HTML / CSS
SHEIN香港:价格实惠的女性时尚服装
2018/08/14 全球购物
企业优秀员工事迹材料
2014/05/28 职场文书
班级标语大全
2014/06/21 职场文书
年度考核登记表个人总结
2015/03/06 职场文书
2015年感恩母亲节的演讲稿
2015/03/18 职场文书
捐书活动倡议书
2015/04/27 职场文书
企业党建工作总结2015
2015/05/26 职场文书
初中物理教学反思
2016/02/19 职场文书
2019脱贫攻坚工作总结报告范本!
2019/08/06 职场文书
python自动化操作之动态验证码、滑动验证码的降噪和识别
2021/08/30 Python