javascript - js拖拽问题，在浏览器外松开鼠标是停止不了拖拽的，如何解决-PHP中文网问答

以下代码在浏览器区域里面运行都是没问题的。但是当你缩小浏览器窗口，拖拽，然后再浏览器外面松开鼠标，再进入浏览器区域，竟然还是“不用按下鼠标就能拖拽”的现象，这算是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 op = document.getElementById("dog");
            op.onmousedown = function (ev) {
                    var oEvent = ev || event;

                    var gapX = oEvent.clientX - op.offsetLeft;
                    var gapY = oEvent.clientY - op.offsetTop;

                    document.onmousemove = function (ev) {
                        var oEvent = ev || event;
                        //限制在可视区域内运动
                        var l = oEvent.clientX - gapX;
                        var t = oEvent.clientY - gapY;
                        var r = document.documentElement.clientWidth - op.offsetWidth;
                        var b = document.documentElement.clientHeight - op.offsetHeight;
                        if (l < 0) {
                            op.style.left = 0 + "px";
                        } else if (l > r) {
                            op.style.left = r + "px";
                        } else {
                            op.style.left = l + "px";
                        }
                        if (t < 0) {
                            op.style.top = 0 + "px";
                        } else if (t > b) {
                            op.style.top = b + "px";
                        } else {
                            op.style.top = t + "px";
                        }
                    }

                }
                //松开鼠标，停止拖拽
            op.onmouseup = function () {
                document.onmousemove = null;
                document.onmouseup = null;
            }
        }
    </script>
</head>

<body>
    <p id="dog"></p>
</body>

</html>