Question

我有一个我正在创建的拖动UI，如果用户点击一个锚标记，我需要能够在HREF之后禁用锚标记，但是然后拖动超过25个PX。拖拉传感器我工作，问题是我不能使用.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事件，所以你需要在那里处理取消。

您也可能想要在点击事件中进行距离计算，而不是等到注册处理程序，直到该阈值通过，但这是您的通话。

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

正确的方法来处理Javascript事件

1 个答案:

HTML

JS