Question

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

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

应该发生的是，当您点击时，选择div的顶部和左侧设置为offsetX事件的offsetY和mousedown，然后{ {1}}事件的mousemove和offsetX用于确定使用jQuery将div的高度和宽度css属性设置为什么。当您将鼠标放在文档的div上时，它应将边框更改为绿色，并将X，Y，Width，Height报告给坐标offsetY。

发生的事情是，当您移动鼠标时，宽度和高度似乎会变为较小的高度和宽度，有时，当您放开鼠标时，高度和宽度设置不正确。

我不确定选择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);
    }
  });
});

Jumpy div使用jQuery调整大小

1 个答案: