0

私の選択 div が mousemove で飛び回っている理由を理解しようとしています。

このドキュメント セクション選択ページを作成するために使用している jsbin があります。

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

何が起こるかは、クリックすると、選択 div の上部と左がイベントの and に設定されoffsetX、offsetY次にmousedownイベントmousemoveのoffsetXandoffsetYが使用されて、div の高さと幅の css プロパティを jQuery で設定するものを決定します. マウスをドキュメントの div の上に置くと、境界線が緑色に変わり、X、Y、幅、高さが座標に報告されspanます。

何が起こっているのかというと、マウスを動かしている間、幅と高さがより小さな高さと幅に変化しているように見え、マウスを離すと、高さと幅が正しく設定されないことがあります。

選択 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 に答える