关于setCapture和releaseCapture的理解和整理

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浏览器😭😭😭