Javascript 使用jQuery调整Jumpy div的大小

我想弄明白为什么我的选择部门在mousemove上到处乱跳

我有一个jsbin，我一直在使用它来开发这个文档节选择页面

应该发生的是，当您单击向下时，选择div的顶部和左侧被设置为

mousedown

事件的

offsetX

和

offsetY

，然后使用

mousemove

事件的

offsetX

和

offsetY

确定使用jQuery设置div的高度和宽度css属性的内容。当您将鼠标悬停在文档的div上时，它应该将边框更改为绿色，并将X、Y、宽度和高度报告到坐标

span

发生的情况是，当您移动鼠标时，宽度和高度似乎变为较小的高度和宽度，有时，当您向上移动鼠标时，高度和宽度设置不正确

---

我不确定是什么导致了选择div上的这种跳跃，我想知道是否有人知道是什么导致了这种跳跃，我应该如何解决它？

您必须像这样区分

事件：

var mouseDown = false;
var mouseDownOffsetX, mouseDownOffsetY, mouseUpOffsetX, mouseUpOffsetY;
var sel = $("#selection");
$(function(){
  $('#documentPage').mousedown(function(eventA) {
    if(!mouseDown){
      mouseDownOffsetX = eventA.offsetX;
      mouseDownOffsetY = eventA.offsetY;
      sel.css('left', mouseDownOffsetX);
      sel.css('top', mouseDownOffsetY);
      sel.width(0);
      sel.height(0);
      sel.css('border', '1px solid red');
      eventA.originalEvent.preventDefault();
    }
    mouseDown = true;
  }).mouseup(function(eventB) {
    mouseUpOffsetX = eventB.offsetX;
    mouseUpOffsetY = eventB.offsetY;
    sel.css('border', '1px solid green');
    var width = mouseUpOffsetX - mouseDownOffsetX;
    var height = mouseUpOffsetY - mouseDownOffsetY;
    mouseDown = false;
    $("#coords").html(mouseDownOffsetX + ", " + mouseDownOffsetY + ", " + width + ", " + height);
  }).mousemove(function(eventC) {
    if(mouseDown){
      sel.width(eventC.offsetX - mouseDownOffsetX);
      sel.height(eventC.offsetY - mouseDownOffsetY);
    }
  });
});

你自己真的试过吗？这没有任何帮助。调整大小时，div仍然会跳动。