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的代码，因此它解决了用户将光标“移动一点点”并且实际上应该被解释为点击的问题。我使用了eucledian距离。您可以放弃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事件中获取鼠标坐标，并根据鼠标移动的距离对鼠标事件进行操作。

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

4 个答案: