什么's;mouseup'和'单击'事件

What's the difference between 'mouseup' and 'click' events?

本文关键字：单击 事件 什么 mouseup      更新时间：2023-09-26

使用jQuery时，我经常喜欢将mousedown和mouseup事件一起用于可按下按钮。

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

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

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

请注意，我正在寻求关于使用这两种方法之间差异的技术解释。这与被标记为重复的问题无关：区分点击与mousedown/mouseup

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

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

通常的预期是点击需要mousedown和mouseup事件，所以我建议使用点击事件。

从可能的重复来看，mouseup和mousedown事件也可能是由鼠标左键以外的鼠标按钮引起的。这与普通用户所期望的非常不同。

我的理解是"点击"隐藏了很多复杂性（例如确保鼠标向下/向上移动发生在同一个元素上，用ESC/右键点击取消）。应该优先使用"点击"而不是"鼠标向下/向上"。

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

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

如果你曾经尝试过自己的拖动行为，你可以理解这个限制。

  1. 拖动需要鼠标按下事件来启动拖动行为。您不能使用单击事件来执行此操作。由于您需要一个单独的鼠标按下事件。一个单独的鼠标向上事件的要求变得显而易见
  2. 拖动开始后（尚未释放鼠标按钮），需要根据光标位置更改对象的位置。这也需要只在鼠标按下事件中进行编码

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

  1. 它看起来不自然。在现实世界中，我们习惯于按下对象并拖动它
  2. 只需点击和鼠标移动即可移动厚重的图形，这可能需要大量的处理

我想添加到其他答案中，click事件在启用触摸的设备上工作，而mouseup/mousedown则不工作（显然是因为没有"鼠标"）

请注意，使用click事件的触摸设备会延迟300ms。

影响I编码方式的最大区别是：aHTML标记上的click事件负责更改URL。相反，mousedown和mouseup事件将不会实现此

相关文章：