0

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

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

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

应该发生的是，当您单击向下时，选择 div 的顶部和左侧设置为事件的offsetXand ，然后事件的and用于确定使用 jQuery 将 div 的高度和宽度 css 属性设置为什么. 当您将鼠标放在文档的 div 上时，它应该将边框更改为绿色，并将 X、Y、宽度、高度报告给坐标。offsetYmousedownmousemoveoffsetXoffsetYspan

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

我不确定是什么导致了选择 div 上的这种跳跃，并且想知道是否有人知道可能导致这种情况的原因，以及我应该如何解决它？

4

1 回答 1

0

你必须区分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);
    }
  });
});
于 2013-08-26T16:34:03.000 回答