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>

没关系。只有一个问题：如果我将鼠标释放到mouseup之外，则不会触发div（因为mouseup事件位于interactable div中，因此有意义。）

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

Answer 1

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

在孩子的isDown上设置mousedown为真在孩子和父母的isDown上设置mouseup false。

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

希望代码是自我解释的：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

如何在鼠标离开div时处理鼠标？

1 个答案: