Javascript 避免在拉斐尔无意中拖动

在这里，我有一个拉斐尔画布与一个矩形，可以点击或拖动

如果您将鼠标移动到矩形，然后单击它，您可以稍微移动它（文本将显示）。我需要在我的应用程序中处理单击，并在用户打算单击时忽略拖动运动。例如，仅当阻力大于（比如）5 px时，我才需要启用阻力。如果只是想点击，有没有办法让拉斐尔不移动矩形

var paper = Raphael("canvas", 600, 600); 
var title = this.paper.text(50, 10, 'click on the square');
var rect = this.paper.rect(20, 20, 30, 30);
rect.attr('fill', 'black')

var start = function () {
      this.odx = 0;
      this.ody = 0;
},
move = function (dx, dy) {
      title.attr('text', 'mouse moved')
      this.translate(dx - this.odx, dy - this.ody);
      this.odx = dx;
      this.ody = dy;
},
up = function () {};

rect.drag(move, start, up);

rect.mousedown(function(e){
      title.attr('text', 'mouse down')      
})

您可以在移动开始时存储初始坐标，并在当前坐标和初始坐标之间的距离小于

x

像素时忽略

var paper = Raphael("canvas", 600, 600); 
var title = this.paper.text(50, 10, 'click on the square');
var rect = this.paper.rect(20, 20, 30, 30);
var PX_TO_IGNORE = 5; // pixels to ignore

rect.attr('fill', 'black')

var start = function () {
      this.odx = 0;
      this.ody = 0;
      this.initialCor = null;
},
move = function (dx, dy) {
  // check if not initialized(if it`s first click)
  if(this.initialCor == null) {
    this.initialCor = {x: dx, y: dy};
    return;
  }

  // ignore PX_TO_IGNORE pixels(basically circle with radius PX_TO_IGNORE)
  if(distance(this.initialCor.x, dx, this.initialCor.y, dy) < PX_TO_IGNORE ) {
    return;
  }

  title.attr('text', 'mouse moved')

  this.translate(dx - this.odx, dy - this.ody);
  this.odx = dx;
  this.ody = dy; 
},
up = function () {
  title.attr('text', 'mouse up')
};

rect.drag(move, start, up);

rect.mousedown(function(e){
  title.attr('text', 'mouse down')      
})

// helper function to calcuate distance between two coordinates
function distance(x1,x2,y1,y2) {
    return Math.sqrt( Math.pow((x1-x2), 2) + Math.pow((y1-y2), 2) );
}

var paper=Raphael（“画布”，600600）； var title=this.paper.text（50,10，'点击方框'）； var rect=this.paper.rect（20,20,30,30）； 变量PX_至_忽略=5；//要忽略的像素 rect.attr（'fill'，'black'） var start=函数（）{ 这是0.odx=0； 该值为0； this.initialCor=null； }, 移动=功能（dx，dy）{ //检查是否未初始化（如果是首次单击） 如果（this.initialCor==null）{ this.initialCor={x:dx，y:dy}； 返回； } //忽略像素（基本上是以半径PX_到_忽略的圆） if（距离（此.initialCor.x，dx，此.initialCor.y，dy）

---

您是否尝试过使用click而不是mousedown？click事件是在mousedown和mouseup事件之后触发的，因此问题不会消失，在mouseup之前会无意中拖动rect。您能看一下@ps0604吗？抱歉，链接已断开