javascript - 鼠标离开div时如何处理mouse up？

Question

我正在创建一个可以拖动、旋转和缩放的元素。它的基本结构如下所示:

<div class='interactable' @mousedown='handleDown' @mouseup='handleUp'>
</div>

<script>
  data: {
    dragging: false,
    resizing: false,
    rotating: false,
  },
  methods: {
    handleDown () {
      // code that sets dragging, resizing, rotating to true
    }
    handleUp () {
      this.dragging = false
      this.resizing = false
      this.rotating = false
    }
  }
</script>

它工作正常。只有一个问题:如果我在 div 之外释放鼠标，则不会触发 mouseup(这是有道理的，因为 mouseup 事件在 可交互 div)。

处理这种情况的常用方法是什么？

Answer 1

您可以使用标记 isDown 来检测父元素中的 mouseUp。

在 child 的 mousedown 上将 isDown 设置为 true。
在子级和父级的 mouseup 上将 isDown 设置为 false。

您可以有多个变量来检测多个元素。

希望代码是不言自明的:

var isDown = false;

function mouseup() {
  if (isDown) {
    alert("Mouse down has occured in child");
  }
  isDown = false;
}

function mousedown() {
  isDown = true;
}

.parent {
  width: 300px;
  height: 300px;
  background: blue;
  padding: 50px;
  box-sizing: border-box;
}
.child {
  width: 200px;
  height: 200px;
  background: red;
}

<div class="parent" onmouseup="mouseup();">
  <div class="child" onmousedown="mousedown()" onmouseup="mouseup()">
  </div>
</div>