マウスを10秒間押したままにしておくとmousemoveが速すぎ、突然左クリックを解除するとJQueryでトリガされないmouseupイベントが発生しますか？

Question

私の要件は次のとおりです。Jueの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>

私はresult.My符号化部は、90％が完了している参照してくださいするには、Chromeブラウザを使用しています。ここでは小さな問題が浮上しています。 mousemoveイベントが速すぎると、mouseupイベントがトリガされません。解決策が必要です

Answer 1

$(document).on('mouseup'..と$('body').on('mouseup'...を使用しているからです。両者は葛藤している。私は、ドキュメントでボディのマウスアップを置き換え、あなたのコードの下でドキュメントのマウスアップを削除しています。

以下を試してください。

$(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>