一个组件监听mousedown和mouseup组件，超出组件范围后，mouseup事件不触发，怎么解决？

比如

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

<style>

#root {

display: inline-block;

width: 100px;

height: 100px;

margin: 100px;

background-color: lightblue;

}

</style>

<script type="text/javascript">

window.onload = function () {

const root = document.getElementById("root")

root.addEventListener('mousedown', function (e) {

console.log('mousedown')

})

root.addEventListener('mouseup', function (e) {

console.log('mouseup')

})

console.log('window.onload')

}

</script>

</head>

<body>

<div id="root"></div>

</body>

</html>

图片.png