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)
blank

相关推荐

发表回复

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

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