使用jQuery的Jumpy div大小調整

Question

我想弄清楚爲什麼我的選擇div在mousemove上跳來跳去。

我有這個jsbin，我一直在用來開發這個文檔節選擇頁面。

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

什麼是應該發生的是，當你點擊了下來，頂部和左側選擇DIV的設置爲offsetX和mousedown事件offsetY，那麼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); 
    } 
    }); 
});