releasecapture 函数_整理怎么解释

releasecapture 函数_整理怎么解释setCapture一.什么是setCapture函数?MDN解释:在处理一个mousedown事件过程中调用这个方法来把全部的鼠标事件重新定向到这个元素,直到鼠标按钮被释放或者document.releaseCapture()被调用。函数作用:程序中主要是要捕获onmousemove和onmouseup事件语法:element.setCapture(retargetToElement);如果被设置为true,所有事件被直接定向到这个元素;如果是false,事件也可以在这

大家好,又见面了,我是你们的朋友全栈君。

setCapture

一. 什么是setCapture函数?

  1. MDN解释:在处理一个 mousedown 事件过程中调用这个方法来把全部的鼠标事件重新定向到这个元素,直到鼠标按钮被释放或者 document.releaseCapture() 被调用。
  2. 函数作用:程序中主要是要捕获onmousemove和onmouseup事件
  3. 语法: element.setCapture(retargetToElement);
    如果被设置为 true, 所有事件被直接定向到这个元素; 如果是 false, 事件也可以在这个元素的子元素上触发。

setCapture不可作用于键盘等其它事件,只能作用于鼠标事件。主要用于: onmouseover 与 onmouseout 事件。

局限性:只兼容IE

releaseCapture

一. 什么是setCapture函数?

  1. MDN解释: 如果该 document 中的一个元素之上当前启用了鼠标捕获,则释放鼠标捕获。通过调用 element.setCapture() 实现在一个元素上启用鼠标捕获。
  2. 函数功能:该函数从当前线程中的窗口释放鼠标捕获,并恢复通常的鼠标输入处理。
  3. 语法: 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浏览器???
:

在这里插入图片描述

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/135044.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 网站服务器建立数据库连接时出错,WordPress提示建立数据库连接出错的解决办法…[通俗易懂]

    网站服务器建立数据库连接时出错,WordPress提示建立数据库连接出错的解决办法…[通俗易懂]很多新手使用wordpress程序建站初期,会遇到页面提示:建立数据库连接出错,英文提示:“Errorestablishingadatabaseconnection”。那么遇到这种情况大家会很头疼,我到底哪里操作不对呀?本文中老魏就实际遇到的此类情况做详细解释。出错的原因有几种,从字面意思能看出来和数据库无法正常读取有关。也许是因为数据库登陆信息不对,也许是数据库挂了无法读取等等。Wor…

  • Binwalk工具的详细使用说明

    https://blog.csdn.net/QQ1084283172/article/details/66971242一、binwalk工具的基本用法介绍1.获取帮助信息$binwalk-h#或者$binwalk–help2.固件分析扫描$binwalkfirmware.bin#或者$binwalkfirmware.bin|hea…

  • 深度探索JFR – JFR详细介绍与生产问题定位落地 – 3. 各种Event详细说明与JVM调优策略(3)

    深度探索JFR – JFR详细介绍与生产问题定位落地 – 3. 各种Event详细说明与JVM调优策略(3)本文基于OpenJDK113.虚拟机相关Event3.3.JIT即时编译相关JIT即时编译可能会遇到编译后的代码缓存占满,或者因为空间有限或者代码设计问题,导致某些关键方法需要重编译导致性能问题,以及因为代码块过大导致编译失败从而性能有问题,这些问题我们可以通过JFR中相关的Event进行查询。JFR对于Java开发可以完全替换JVM编译日志。额外讲解:JIT相关的知识首先,这里简单介绍下JIT相关的知识(这里我推荐看O’Rerilly上面的Java.

  • uniqueidentifier类型_unique和normal

    uniqueidentifier类型_unique和normal@uuidasnvarchar(max))+””转载于:https://my.oschina.net/xuyuchends/blog/852105

  • 动态规划之背包问题——01背包

    动态规划之背包问题——01背包文章目录一、01背包问题二、二维dp数组解决01背包问题1.确定dp数组以及下标的含义2.确定递推公式3.dp数组初始化4.确定遍历顺序5.举例推导dp数组三、一维dp数组解决01背包问题1.确定dp数组以及下标的含义2.一维dp数组的递推公式3.一维dp数组如何初始化4.一维dp数组遍历顺序5.举例推导dp数组四、leetcode例题讲解01背包问题416.分割等和子集1049.最后一块石头的重量II494.目标和474.一和零背包问题中我们常见的就是01背包和完全背包。在l

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号