CODEWITHSUNDEEP
javascripthtmlvue.js
alex
alex

Reputation: 7611

How to handle mouse up when the mouse leaves the div?

I'm creating an element that can be dragged, rotated, and scaled. It's basic structure looks like this:

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

It works okay. Only one problem: mouseup is not triggered if I release the mouse outside of the div (which make sense since the mouseup event is in the interactable div).

What's the common way to deal with this situation?

Upvotes: 2

Views: 247

Answers (1)

Jones Joseph
Jones Joseph

Reputation: 4938

You can detect the mouseUp in the parent element by using a flag say isDown.

Set the isDown true on mousedown in the child.
Set the isDown false on mouseup in both child and the parent.

You can have multiple variables to detect multiple elements.

Hope code is self explanatory:

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>

Upvotes: 3

Related Questions