jquery - 如何判断鼠标在.click（）期间是否移动？

Question

根据.click()的 jQuery 文档，该事件仅在这一系列事件之后触发：

• 当指针位于元素内部时，按下鼠标按钮。
• 当指针位于元素内部时，鼠标按钮被释放。

我面临的问题是我在项目网格上使用“单击以拖动”功能，我想为每个项目注册单击事件。这意味着每次我单击拖动时，鼠标都会按在一个项目上，然后在拖动发生后在同一个项目上释放。这会触发点击事件。

如果鼠标在按下鼠标到释放鼠标之间没有移动，有没有办法只触发事件？虽然这看起来微不足道，但作为一个 jQuery 初学者，我有点难过。

Answer 1

跟踪 mousedown 和 mouseup 之间的鼠标位置，以查看鼠标指针移动的情况。您可能应该添加一点误差范围，例如每个方向的几个像素，但下面是一个简化的示例：

var left  = 0,
    top   = 0;    

$(element).on({
    mousedown: function(e) {
        left  = e.pageX;
        top   = e.pageY;
    },
    mouseup: function(e) {
        if (left != e.pageX || top != e.pageY) {
            alert(' OMG, it moved ! ');
        }
    }
});

Answer 2

我稍微修改了@adeneo 的代码，所以它解决了用户“稍微”移动光标的问题，它实际上应该被解释为点击。我为此使用了欧几里德距离。您可以放弃以Math.sqrt获得更好的性能，但随后您必须调整radiusLimit变量。

var left = 0,
    top = 0,
    radiusLimit = 5;

$(element).on({
  mousedown: function(event) {
    left = event.pageX;
    top = event.pageY;
  },
  mouseup: function(event) {
    var deltaX = event.pageX - left;
    var deltaY = event.pageY - top;
    var euclidean = Math.sqrt(deltaX * deltaX + deltaY * deltaY);

    if (euclidean < radiusLimit) {
      console.log("this is a click.");
    }
  }
});

Answer 3

你认为 mousedown 和 mouseup 事件触发器是一个可行的选择吗？如果 mousedown 的坐标与 mouseup 的坐标相同，则在单击期间光标没有改变位置。

Answer 4

不，没有这样的事件，因为那几乎完全没有用。即使用户不打算这样做，鼠标在单击时也会轻微移动是很常见的，特别是对于普通鼠标，单击按钮位于鼠标本身上。

在 mousedown 和 mouseup 事件中获取鼠标坐标，并根据鼠标移动的距离对 mouseup 事件进行操作。