jquery - 如果我按住鼠标左键单击按钮 10 秒，mousemove 太快然后突然松开左键单击，在 JQuery 中没有触发 mouseup 事件？

Question

我的要求是:在 Jquery 中使用 mousemove、mouseup、mousedown 事件将一个 div 移动到另一个父 div 中。

$(document).ready(function () {
            var drag = null; var Top = null; var Left = null;
            
            var O = $("#Outside").offset();
            var outsideTop = O.top;
            var outsideRight = O.left + $("#Outside").width();
            var outsideBottom = O.top + $("#Outside").height();
            var outsideLeft = O.left; var move;
            $('#Box').mousedown(function (e) {
                $("#Box").css({ "background-color": "violet" });
                drag = $(e.target);
                drag.css({ "cursor": "move" });
                var box = $("#Box").offset();
                Top = e.pageY - box.top;
                Left = e.pageX - box.left;
               
            });
            $('body').on('mouseup', function (e) {
                $("#Box").css({ "background-color": "skyblue", "cursor": "default" });
                $('body').unbind('mousemove');
                drag = null;
            });
            $(document).on('mousemove', function (e) {
                if (drag) {
                    drag.css({ "background-color": "greenyellow" });
                    var cursorTop = e.pageY - Top;
                    var cursorLeft = e.pageX - Left;
                    var cursorRight = (e.pageX - Left) + $("#Box").width();
                    var cursorBottom = (e.pageY - Top) + $("#Box").height();
                    if (((cursorTop >= outsideTop) && (cursorTop <= outsideBottom)) && ((cursorLeft >= outsideLeft) && (cursorLeft <= outsideRight)))
                        if ((((cursorRight) >= outsideLeft) && ((cursorRight) <= outsideRight)) && ((cursorBottom >= outsideTop) && ((cursorBottom) <= outsideBottom))) {
                            drag.offset({
                                top: e.pageY - Top,
                                left: e.pageX - Left
                            });
                        }
                }
            }).on('mouseup', function () {
                $('body').unbind('mousemove');
               drag=null;
            });
           
        });

#Outside
{
  height:500px;
  width:1000px;
  position:absolute;
  background-color:navajowhite;
  border:5px solid blue;
  margin-left:120px;
  margin-top:18px;


}
#Box
{
  height:100px;
  width:100px;
  /*position:absolute;*/
  background-color:lightskyblue;
  border:4px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>

<div id="Outside">
  <div id="Box"></div>
</div>

我正在使用 chrome 浏览器查看结果。我的编码部分已完成 90%。但这里提出了一个小问题。 我遇到了一个问题，如果 mousemove 事件太快，则不会触发 mouseup 事件。我需要一个解决方案

Answer 1

这是因为您使用了 $(document).on('mouseup'.. 和 $('body').on('mouseup'...。这两者是冲突的。我已经将 body mouseup 替换为 document 并删除了 document mouseup down 你的代码。

请尝试以下。

$(document).ready(function () {
            var drag = null; var Top = null; var Left = null;
            
            var O = $("#Outside").offset();
            var outsideTop = O.top;
            var outsideRight = O.left + $("#Outside").width();
            var outsideBottom = O.top + $("#Outside").height();
            var outsideLeft = O.left; var move;
            $('#Box').mousedown(function (e) {
                $("#Box").css({ "background-color": "violet" });
                drag = $(e.target);
                drag.css({ "cursor": "move" });
                var box = $("#Box").offset();
                Top = e.pageY - box.top;
                Left = e.pageX - box.left;
               
            });
            $(document).on('mouseup', function (e) {
                $("#Box").css({ "background-color": "skyblue", "cursor": "default" });
                $('body').off('mousemove');
                drag = null;
                console.log("ok");
            });
            $(document).on('mousemove', function (e) {
                if (drag) {
                    drag.css({ "background-color": "greenyellow" });
                    var cursorTop = e.pageY - Top;
                    var cursorLeft = e.pageX - Left;
                    var cursorRight = (e.pageX - Left) + $("#Box").width();
                    var cursorBottom = (e.pageY - Top) + $("#Box").height();
                    if (((cursorTop >= outsideTop) && (cursorTop <= outsideBottom)) && ((cursorLeft >= outsideLeft) && (cursorLeft <= outsideRight)))
                        if ((((cursorRight) >= outsideLeft) && ((cursorRight) <= outsideRight)) && ((cursorBottom >= outsideTop) && ((cursorBottom) <= outsideBottom))) {
                            drag.offset({
                                top: e.pageY - Top,
                                left: e.pageX - Left
                            });
                        }
                }
            })
           
        });

#Outside
{
  height:500px;
  width:1000px;
  position:absolute;
  background-color:navajowhite;
  border:5px solid blue;
  margin-left:120px;
  margin-top:18px;


}
#Box
{
  height:100px;
  width:100px;
  /*position:absolute;*/
  background-color:lightskyblue;
  border:4px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="Outside">
  <div id="Box"></div>
</div>