javascript - 处理 Javascript 事件的正确方法

Question

我有一个正在创建的拖动 UI，如果用户单击 anchor 标记，然后拖动超过 25 PX，我需要能够禁用 HREF 后的 anchor 标记。我正在使用的拖动传感器，问题是我不能使用 .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

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

您可能还希望在点击事件中进行距离计算，而不是等到超过该阈值后再注册处理程序，但这是您的决定。

您可以在此处查看似乎可以处理您的情况的代码: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);
}