마우스가 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> 

괜찮습니다. 하나의 문제 : mouseup이 div (mouseup 이벤트가 interactable div에 있기 때문에 의미가 있습니다) 외부로 마우스를 놓으면 트리거되지 않습니다.

이 상황을 처리하는 일반적인 방법은 무엇입니까?

Answer 1

isDown 플래그를 사용하여 부모 요소의 mouseUp을 감지 할 수 있습니다.

어린이의 mousedown에 isDown을 true로 설정하십시오.
isDown을 자식과 부모의 mouseup에 false로 설정하십시오.

여러 변수를 사용하여 여러 요소를 감지 할 수 있습니다. , 나는 전체 페이지에`handleUp`을 첨부 할 수 있습니다 생각

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>