Javascript “mouseup”和“click”事件有什么区别？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14805225/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
What's the difference between 'mouseup' and 'click' events?
提问by caiosm1005
Using jQuery, I often like to use mousedownand mouseupevents in conjunction for pushable buttons.
使用 jQuery，我经常喜欢将mousedown和mouseup事件结合用于可推送按钮。
However, in every case I've used the mouseupevent, binding the clickevent instead seemed to produce identical results.
但是，在我使用过mouseup事件的每种情况下，绑定click事件似乎都产生了相同的结果。
Is there any substantial difference between the two methods below?
下面的两种方法有什么实质性的区别吗？
// Method 1
$('.myButton').bind('click', callback);
// Method 2
$('.myButton').bind('mouseup', callback);
Please note I'm seeking a technical explanation on the differences between using both methods. This has no relation to the question that has been flagged as a dupe: Differentiate click vs mousedown/mouseup
请注意，我正在寻求有关使用这两种方法之间差异的技术解释。这与被标记为欺骗的问题无关：区分点击与鼠标按下/鼠标向上
回答by Bill Lynch
With a mouseup event, you can click somewhere else on the screen, hold down the click button, and move the pointer to your mouseup element, and then release the mouse pointer.
使用 mouseup 事件，您可以单击屏幕上的其他位置，按住单击按钮，将指针移动到 mouseup 元素，然后释放鼠标指针。
A click event requires the mousedown and mouseup event to happen on that element.
单击事件需要在该元素上发生 mousedown 和 mouseup 事件。
The normal expectation is that a click requires both the mousedown and mouseup event, so I'd recommend the click event.
通常的期望是点击需要 mousedown 和 mouseup 事件，所以我推荐点击事件。
From the possible duplicate, it appears that mouseup and mousedown events can also be caused by mouse buttons other than the left click button. Which is very different from what a generic user would expect.
从可能的副本来看，mouseup 和mousedown 事件似乎也可能由鼠标左键以外的按钮引起。这与一般用户所期望的非常不同。
回答by ZakiMa
My understanding is that "click" hides lots of complexities (such as making sure that mousedown/up occur on the same element, cancelling with ESC/right click). Using "click" over "mousedown/up" should be preferred.
我的理解是“单击”隐藏了很多复杂性（例如确保鼠标按下/向上发生在同一元素上，使用 ESC/右键单击取消）。应该首选在“鼠标按下/向上”上使用“单击”。
One scenario where "click" does not seem to work when app updates content very often in such a way that underlying DOM elements get replaced. In this case "click" will not be triggered and it might result in poor customer experience.
当应用程序以替换底层 DOM 元素的方式经常更新内容时，“单击”似乎不起作用的一种情况。在这种情况下，不会触发“点击”，可能会导致客户体验不佳。
回答by vsync
I would like to add to the other answers that clickevent works on touch-enableddevices while mouseup/ mousedowndo not (obviously because there's no "mouse")
我想在其他答案中添加click事件在启用触摸的设备上工作而mouseup/mousedown不工作（显然是因为没有“鼠标”）
Note that there's a 300ms delayon touch devices with the clickevent.
请注意，带有该事件的触摸设备有300 毫秒的延迟click。
回答by Vishwas Gagrani
I think Mouse Down and Mouse Up events give you further control over the click event. It divides the click event into two more events so that more details can be coded for each event. Click event restricts the mouse click and force you to code both the events in the same function.
我认为 Mouse Down 和 Mouse Up 事件可以让您进一步控制点击事件。它将点击事件分成另外两个事件，以便可以为每个事件编码更多细节。单击事件限制鼠标单击并强制您在同一函数中对两个事件进行编码。
You can understand this restriction if you ever try to make your own dragging behavior.
如果您曾尝试制作自己的拖动行为，则可以理解此限制。
- Dragging needs a mouse-down event to start a drag behavior. You cannot do it with click event. And since you need a separate mouse-down event. The requirement of a separate mouse-up event becomes obvious.
- Once the dragging starts ( you have not yet release the mouse button) you need the object to change position as per the cursor position. This too needs to be coded only in mouse-down event.
- 拖动需要一个鼠标按下事件来启动拖动行为。你不能用点击事件来做到这一点。因为你需要一个单独的鼠标按下事件。一个单独的鼠标向上事件的需求变得明显。
- 一旦拖动开始（您还没有释放鼠标按钮），您需要根据光标位置更改对象的位置。这也只需要在鼠标按下事件中进行编码。
However you can use click event too if we could change the way how people drag the objects. For example click-1 starts the drag and click-2 stops the drag and puts the object on another position. But there are two problems I see:
但是，如果我们可以改变人们拖动对象的方式，您也可以使用单击事件。例如，click-1 开始拖动，click-2 停止拖动并将对象放在另一个位置。但是我看到有两个问题：
- It does not look natural. As in the real world we are in habit of pressing the object and dragging it.
- It can be process intensive to move heavy graphics just by clicking and mouse-move.
- 它看起来不自然。就像在现实世界中一样，我们习惯于按下对象并拖动它。
- 仅通过单击和鼠标移动来移动繁重的图形可能需要大量处理。
回答by whitneyit
The biggest difference that affects the way I code; is the click eventon an a tagis responsible for changing the url. The mousedown, nor mouseup event will acheive this
影响我编码方式的最大差异；是click event上a tag是负责更改URL。mousedown 和 mouseup 事件都不会实现这一点
