关于setCapture和releaseCapture的理解和整理
setCapture
一. 什么是setCapture函数？
- MDN解释：在处理一个 mousedown 事件过程中调用这个方法来把全部的鼠标事件重新定向到这个元素，直到鼠标按钮被释放或者 document.releaseCapture() 被调用。
- 函数作用：程序中主要是要捕获onmousemove和onmouseup事件
- 语法： element.setCapture(retargetToElement);
如果被设置为 true, 所有事件被直接定向到这个元素; 如果是 false, 事件也可以在这个元素的子元素上触发。
setCapture不可作用于键盘等其它事件，只能作用于鼠标事件。主要用于: onmouseover 与 onmouseout 事件。
局限性：只兼容IE
releaseCapture
一. 什么是setCapture函数？
- MDN解释： 如果该 document 中的一个元素之上当前启用了鼠标捕获，则释放鼠标捕获。通过调用 element.setCapture() 实现在一个元素上启用鼠标捕获。
- 函数功能：该函数从当前线程中的窗口释放鼠标捕获，并恢复通常的鼠标输入处理。
- 语法： document.releaseCapture() 一旦释放鼠标捕获，鼠标事件将不再全部被定向到启用了鼠标捕获的元素。
- 以拖动区域块为例子,通过onmousemove和onmouseup来进行捕获,
<div id="box"><div id="left"></div><div id="resize"></div><div id="right"></div>
</div>
<script>window.onload = function () {var resize = document.getElementById("resize");var left = document.getElementById("left");var right = document.getElementById("right");var box = document.getElementById("box");resize.onmousedown = function (e) {var startX = e.clientX;resize.left = resize.offsetLeft;document.onmousemove = function (e) {var endX = e.clientX;var moveLen = resize.left + (endX - startX);var maxT = box.clientWidth - resize.offsetWidth;if (moveLen < 150) moveLen = 150;if (moveLen > maxT - 150) moveLen = maxT - 150;resize.style.left = moveLen;left.style.width = moveLen + "px";right.style.width = (box.clientWidth - moveLen - 5) + "px";}document.onmouseup = function (evt) {document.onmousemove = null;document.onmouseup = null;resize.releaseCapture;console.log('释放鼠标捕获', resize.releaseCapture)}resize.setCapture;// resize.setCapture && resize.setCapture(true);console.log('获取鼠标捕获', resize.setCapture)return false;}}
当我在拖动中，其实setsetCapture函数和releaseCapture函数返回时undefined，这个也是因为兼容性问题导致。由现在仅仅只是支持IE浏览器
关于setCapture和releaseCapture的理解和整理相关推荐
- 理解SetCapture、ReleaseCapture、GetCapture（控制了消息发往哪个窗口，是理解消息的关键）
理解SetCapture.ReleaseCapture.GetCapture 正常情况下,鼠标指针位于哪个窗口区域内,鼠标消息就自动发给哪个窗口.如果调用了SetCapture,之后无论鼠标的位置在哪 ...
- 理解SetCapture、ReleaseCapture、GetCapture
正常情况下,鼠标指针位于哪个窗口区域内,鼠标消息就自动发给哪个窗口.如果调用了SetCapture,之后无论鼠标的位置在哪,鼠标消息都发给指定的这个窗口,直到调用ReleaseCapture或者调用S ...
- 理解SetCapture、ReleaseCapture、GetCapture（控制了消息发往哪个窗口，是理解消息的关键）...
理解SetCapture.ReleaseCapture.GetCapture 正常情况下,鼠标指针位于哪个窗口区域内,鼠标消息就自动发给哪个窗口.如果调用了SetCapture,之后无论鼠标的位置在哪 ...
- 关于SetCapture() 和 ReleaseCapture()的用法的个人理解
1. 函数功能:在当前线程的指定窗口里设置鼠标捕获.一旦窗口捕获了鼠标,所有鼠标输入都针对该窗口,无论光标是否在窗口的边界内还是边界外.同一时刻只能有一个窗口捕获鼠标. 2. 失效条件: A. 当鼠标 ...
- 关于SetCapture() 和 ReleaseCapture()的用法的个人理解[通俗易懂]
1. 函数功能:在当前线程的指定窗口里设置鼠标捕获.一旦窗口捕获了鼠标,所有鼠标输入都针对该窗口,无论光标是否在窗口的边界内还是边界外.同一时刻只能有一个窗口捕获鼠标. 2. 失效条件: A. 当鼠标 ...
- win32中SetCapture 和 ReleaseCapture的使用
最近在用win32写<visual C++经典游戏程序设计>中的扫雷游戏,在写到鼠标点击雷区的时候用到了SetCapture,和ReleaseCapture这对系统函数. 那么为什么需要用 ...
- SetCapture()和ReleaseCapture()
查MSND,对SetCapture()函数的说明为:"该函数在属于当前线程的指定窗口里设置鼠标捕获.一旦窗口捕获了鼠标,所有鼠标输入都针对该窗口,无论光标是否在窗口的边界内.同一时刻只能有一 ...
- 关于SetCapture() 和 ReleaseCapture()的使用方法
查MSND,对SetCapture()函数的说明为:"该函数在属于当前线程的指定窗体里设置鼠标捕获.一旦窗体捕获了鼠标,全部鼠标输入都针对该窗体,不管光标是否在窗体的边界内.同一时刻仅仅能有 ...
- 关于SetCapture() 和 ReleaseCapture()的用法
http://blog.csdn.net/lanyzh0909/article/details/5543399 查MSND,对SetCapture()函数的说明为:"该函数在属于当前线程的指 ...
最新文章
- Git（一）之基本操作详解
- shell脚本（查看多台服务器端口）
- c语言recv函数返回值,谈谈recv()函数的返回值
- iOS如何实现语音播报及后台播放
- shell_之_find(查找)
- win7如何删除mariadb
- span标签的鼠标滑入提示_彻底搞懂拖拽——基于鼠标事件的拖拽以及基于HTML5 API的拖拽...
- 神经网络 测试集loss不下降_代码实践 | 全连接神经网络回归---房价预测
- CodeForces - 946C String Transformation
- 数据治理需要注意什么问题
- python学习之路第四周汇总
- 微信抢红包插件与Android辅助功能
- IAR+STVP烧录程序排错
- 设置Chrome为兼容模式
- deflate php,PHP Deflate a string
- 微信小程序--保存图片到相册功能实现
- 取消Eclipse中的语法分析警告，去掉虫子 ，去掉红点报错方法
- 【苦练基本功】代码整洁之道 pt4（第10章-第12章）
- 无迹卡尔曼滤波UKF_代码及调参(2)
- secureCRT连接阿里云服务器
热门文章
- js中获取html元素之document.documentElement
- 日文xp系统中 日文键盘模式转英式键盘模式
- linux shell 正则表达式
- tplink迷你路由器中继模式_TP-Link TL-WR700N V3迷你型路由器无线中继设置 | 192.168.1.1登陆页面...
- 好饭不怕晚,Google基于人工智能AI大语言对话模型Bard测试和API调用(Python3.10)
- 进制转换：十六进制转十进制
- 全国三甲医院突破3000家，医疗格局正在生变
- Springboot整合Redis(RedisConfig等工具类编写)
- C贪吃蛇代码详解(ncurse)
- 实验室服务器系统,科学网—实验室服务器平台搭建流水记 - 李俏俊的博文