js拖拽问题，在浏览器外松开鼠标是停止不了拖拽的，如何解决
以下代码在浏览器区域里面运行都是没问题的。但是当你缩小浏览器窗口，拖拽，然后再浏览器外面松开鼠标，再进入浏览器区域，竟然还是“不用按下鼠标就能拖拽”的现象，这算是bug吗？有方法解决吗？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#dog {
width: 150px;
height: 150px;
background: red;
position: absolute;
}
</style>
<script>
window.onload = function () {
var odiv = document.getElementById("dog");
odiv.onmousedown = function (ev) {
var oEvent = ev || event;
var gapX = oEvent.clientX - odiv.offsetLeft;
var gapY = oEvent.clientY - odiv.offsetTop;
document.onmousemove = function (ev) {
var oEvent = ev || event;
//限制在可视区域内运动
var l = oEvent.clientX - gapX;
var t = oEvent.clientY - gapY;
var r = document.documentElement.clientWidth - odiv.offsetWidth;
var b = document.documentElement.clientHeight - odiv.offsetHeight;
if (l < 0) {
odiv.style.left = 0 + "px";
} else if (l > r) {
odiv.style.left = r + "px";
} else {
odiv.style.left = l + "px";
}
if (t < 0) {
odiv.style.top = 0 + "px";
} else if (t > b) {
odiv.style.top = b + "px";
} else {
odiv.style.top = t + "px";
}
}
}
//松开鼠标，停止拖拽
odiv.onmouseup = function () {
document.onmousemove = null;
document.onmouseup = null;
}
}
</script>
</head>
<body>
<div id="dog"></div>
</body>
</html>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
鼠标移到外部的时候为负值，所以做一下判定就好了。
松开鼠标使用
document.onmouseup