マウスがdivを離れるときにマウスを操作する方法は？

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> 

問題なく動作します。 1つの問題：mouseupがdiv（mouseupイベントがinteractable divにあるため意味があります）の外にマウスを放すと、トリガーされません。

この状況を処理する一般的な方法は何ですか？

Answer 1

フラグisDownを使用して、親要素のmouseUpを検出できます。

子供の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>