使用jQuery调整Jumpy div的大小

Question

我试图弄清楚为什么我的选择div在mousemove上跳来跳去。

我已经使用了这个jsbin来开发此文档部分选择页面。

http://jsbin.com/IGuNEmi/7/edit

什么是应该发生的是，当你点击了下来，顶部和左侧选择DIV的设置为offsetX和offsetY的的mousedown事件，那么mousemove事件的offsetX和offsetY用于确定如何设置div的高度，宽度css属性到jQuery。 当您将鼠标悬停在文档的div上时，它应将边框更改为绿色，并将X，Y，宽度，高度报告给坐标span 。

发生的情况是，在四处移动鼠标时，宽度和高度似乎正在更改为较小的高度和宽度，有时，当您放开鼠标时，高度和宽度设置不正确。

我不确定是什么原因导致选择div出现这种跳动，并且想知道是否有人知道是什么原因引起的，我应该如何解决？

Answer 1

您必须像这样区分event ：

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);
    }
  });
});