“mouseup”和“click”事件有什么区别？

Question

使用 jQuery，我经常喜欢将mousedown和mouseup事件结合用于可推动按钮。

但是，在每种情况下，我都使用了mouseup事件，而绑定click事件似乎会产生相同的结果。

下面的两种方法有什么实质性的区别吗？

// Method 1
$('.myButton').bind('click', callback);

// Method 2
$('.myButton').bind('mouseup', callback);

请注意，我正在寻求有关使用这两种方法之间差异的技术解释。 这与被标记为欺骗的问题无关：区分点击与鼠标按下/鼠标向上

Answer 1

使用 mouseup 事件，您可以单击屏幕上的其他位置，按住单击按钮，将指针移动到 mouseup 元素，然后释放鼠标指针。

单击事件需要在该元素上发生 mousedown 和 mouseup 事件。

通常的期望是点击需要 mousedown 和 mouseup 事件，所以我推荐点击事件。

从可能的副本来看，mouseup 和mousedown 事件似乎也可能由鼠标左键以外的按钮引起。 这与一般用户所期望的非常不同。

Answer 2

我的理解是“单击”隐藏了很多复杂性（例如确保鼠标按下/向上发生在同一元素上，使用 ESC/右键单击取消）。 应该首选在“鼠标按下/向上”上使用“单击”。

当应用程序以替换底层 DOM 元素的方式经常更新内容时，“单击”似乎不起作用的一种情况。 在这种情况下，不会触发“点击”，可能会导致客户体验不佳。

Answer 3

我认为 Mouse Down 和 Mouse Up 事件可以让您进一步控制点击事件。 它将点击事件分成另外两个事件，以便可以为每个事件编码更多细节。 单击事件限制鼠标单击并强制您在同一函数中对两个事件进行编码。

如果您曾尝试制作自己的拖动行为，则可以理解此限制。

拖动需要一个鼠标按下事件来启动拖动行为。 你不能用点击事件来做到这一点。 因为你需要一个单独的鼠标按下事件。 一个单独的鼠标向上事件的需求变得明显。
一旦拖动开始（您还没有释放鼠标按钮），您需要根据光标位置更改对象的位置。 这也只需要在鼠标按下事件中进行编码。

但是，如果我们可以改变人们拖动对象的方式，您也可以使用单击事件。 例如，click-1 开始拖动，click-2 停止拖动并将对象放在另一个位置。 但是我看到有两个问题：

Answer 4

影响我的方式代码最大的区别是：在click一个事件a HTML标签是负责更改URL。 相比之下， mousedown和mouseup事件不会实现这一点

Answer 5

我想添加其他答案，即click事件适用于启用触摸的设备，而mouseup / mousedown则不行（显然是因为没有“鼠标”）

请注意，带有click事件的触摸设备有300 毫秒的延迟。