处理Javascript事件的正确方法

Question

我有一个正在创建的拖动UI，并且如果用户单击某个锚标记，然后拖动超过25个PX，则需要能够在HREF之后禁用锚标记。 我正在使用的拖动传感器，问题在于我无法使用.click()因为已经为拖动触发了mousedown，而.mouseup()对于游戏来说为时已晚，因为该事件仍在触发。

如何正确执行以下代码？

$(document).mousemove(function (e) {
  distance = e.pageX - initialPosition;
  $('#panorama').css({ 'left': distance });
  if (Math.abs(distance - 0) > 25) {
    //Event in question below:
    $('a').mouseup(function (e) { e.preventDefault(); });
  }
  return false;
});

Answer 1

很难知道您的实际意图，但是移动到锚点的目的地发生在click事件中，而不是mouseup事件中，因此您需要在那里进行取消。

您可能还希望在click事件中进行距离计算，而不是等待注册处理程序，直到超过该阈值，但这就是您的要求。

您可以在此处查看似乎可以解决您情况的代码： jsFiddle

许多代码用于可视化事件触发器的坐标和顺序。

对于后代：

的HTML

<a href="404.html">Link.....................................</a>
X:<span id='mouseX'></span>
Y:<span id='mouseY'></span>

JS

var initialPos = 0;

$('a').mousedown(function(e){
  updatePos(e);
  console.log('down');
  initialPos = e.pageX;
});
$('a').mousemove(function(e){
  console.log('move');
  updatePos(e);
});
$('a').click(function(e){
  console.log('click');
  updatePos(e);
  var distance = e.pageX - initialPos;
  if (Math.abs(distance) > 5) {
    console.log("Passed threshold, cancelling event");
    e.preventDefault();
    return false;
  }
});

function updatePos(e) {
  $('#mouseX').html(e.pageX);
  $('#mouseY').html(e.pageY);
}