Javascript 拖动时 mouseUp 事件

mouseUp event on drag

提问by Headshota

I have a link which has mousedown and mouseup handlers to animate some objects on page. When dragged (drag and drop) link fires mousedown event but it doesn't fire mouseup when released. is there a workaround for this problem?

我有一个链接，它有 mousedown 和 mouseup 处理程序来为页面上的一些对象设置动画。拖动（拖放）链接时会触发 mousedown 事件，但释放时不会触发 mouseup 。这个问题有解决方法吗？

Here is a example, if you click link normally it works but when you drag the link mouse up doesn't happen:

这是一个示例，如果您正常单击链接它可以工作，但是当您向上拖动链接鼠标时不会发生：

http://jsfiddle.net/hL3mg/1/

http://jsfiddle.net/hL3mg/1/

回答by David Mulder

Handling drags

处理阻力

Something crucial nobody mentions here is that there actually isan event to register the end of a drag, which as explained by the other answers is what's happening here. The event is called dragend, so you can simply do

这里没有人提到的关键是实际上有一个事件来记录拖动的结束，正如其他答案所解释的那样，这就是这里发生的事情。事件被调用dragend，所以你可以简单地做

$("a").on("dragend",function(){
    console.log("Drag End");
});

To register the end of the drag. The disadvantage of this is that you will still see a drag interface (in other words: the browser will show some UI to notify the user he's draggin).

注册拖动的结束。这样做的缺点是你仍然会看到一个拖动界面（换句话说：浏览器会显示一些 UI 来通知用户他正在拖动）。

Registering mouse up's

注册鼠标

There is however also a way to register the sought after mouse ups, simply cancel the drag behaviour by returning falsein the clickevent listener, and then register the mouseupon the document.

然而，还有一种方法可以注册追捧的鼠标，只需在事件侦听器中通过returning取消拖动行为，然后在.falseclickmouseupdocument

$("a").mousedown(function(){
    console.log("Mouse Down");
    return false;
});

$(document).mouseup(function(){
    console.log("Mouse Up");
});

The only remark that I do feel like I have to make is that in a stand alone jsfiddle this worked perfectly, in my own code it did not, so I am listening for both the mouseupand the dragendjust to be sure.

我觉得我必须做的唯一评论是，在独立的 jsfiddle 中，这工作得很好，但在我自己的代码中却没有，所以我正在倾听 themouseup和 thedragend以确保。

回答by diogocarmo

What I did to solve this is associate an "mouseOut" event to every link and check if any link has been pressed. If it did, the mouseOut would fix the positioning of the link. Here's the code:

我为解决这个问题所做的是将“mouseOut”事件关联到每个链接并检查是否有任何链接被按下。如果是这样，mouseOut 将修复链接的位置。这是代码：

var mouse_button = false;
$('a')
.mousedown(function(){
    $(this).css('top', '+=2');
    mouse_button = true;

})
.mouseup(function(){
    $(this).css('top', '-=2');
    mouse_button = false;
})
.mouseout(function(){
    if (mouse_button) {
        $(this).css('top', '-=2');
        mouse_button = false;
    }
});

回答by wong2

It seems that the mouseup event won't be fired because your mouse has left the link when you release the left button.
From http://www.quirksmode.org/js/events_mouse.html:

似乎不会触发 mouseup 事件，因为当您松开左键时鼠标已经离开了链接。
来自http://www.quirksmode.org/js/events_mouse.html：

Suppose the user depresses the mouse button on a link, then moves his mouse off the link and then releases the mouse button. Now the link only registers a mousedown event.

假设用户在链接上按下鼠标按钮，然后将鼠标移离链接，然后释放鼠标按钮。现在链接只注册一个 mousedown 事件。

---

---

Maybe you can do this to walkaround:

也许你可以这样做来走动：

1. register mousedown event for a link
2. register mouseup event for the whole document
3. when the link fire mousedownevent , then the document fire mouseupevent, you can think that link is firing mouseupevent

1. 为链接注册 mousedown 事件
2. 为整个文档注册 mouseup 事件
3. 当链接触发mousedown事件，那么文档触发mouseup事件，你可以认为链接是触发mouseup事件

回答by BobN

What you described is by conscious design.

你描述的是有意识的设计。

It has always been the intent that if you mouse down on a link, a button, whatever and change your mind before you've mouse up, you can move the cursor off the link or button and then release the mouse button and the action - the link, button, whatever - will not occur.

一直以来的意图是，如果您将鼠标放在链接、按钮或任何东西上，并且在您抬起鼠标之前改变主意，您可以将光标从链接或按钮上移开，然后松开鼠标按钮和操作 -链接，按钮，无论什么 - 都不会发生。

It is by design that the mouse up is not sent to the object which received the mouse down if the cursor is moved off the item before mouse up.

按照设计，如果光标在鼠标向上移动之前从项目上移开，则鼠标向上不会发送到接收鼠标向下的对象。

This is a user interface design consideration. This is why you should program such that it takes a click to initiate just about any action - not just a mouse down.

这是用户界面设计的考虑。这就是为什么您应该进行编程，使其几乎可以通过单击来启动任何操作 - 而不仅仅是按下鼠标。

I grant you that there may be times where you want to take action on a mouse down, such as in dragging, but it is the exception and when done properly, the mouse up will be seen - except in some versions of IE when the mouse up will be lost if you drag the cursor off the page - to the top, left or right.

我承认，有时您可能想对鼠标按下时采取行动，例如拖动，但这是例外，如果操作正确，将看到鼠标抬起 - 除非在某些版本的 IE 中，当鼠标如果您将光标拖离页面 - 到顶部、左侧或右侧，向上将丢失。

If you want to move things around and be able to see the mouse up, it is far better to use divisions or such than things like links.

如果您想四处移动东西并能够看到鼠标，那么使用分区等比使用链接之类的东西要好得多。

Links are intended to be just that: link to something. Yes, you can code JavaScript to be executed when the link is clicked - href="javascript:someFunction();" or you can code onclick to execute something or even mouse up over down out. However, the link is intended to do something not to be dragged around.

链接旨在：链接到某物。是的，您可以编写在单击链接时执行的 JavaScript - href="javascript:someFunction();" 或者您可以编写 onclick 代码来执行某些操作，甚至可以将鼠标向上移出。但是，该链接旨在做一些不会被拖拽的事情。

Use a division or a span and move it around.

使用除法或跨度并四处移动。

Bob

鲍勃

回答by farinspace

If you look closely at what the browser does, it "drags" the DOM object, in my case a link, upon release the mouseupevent does not fire for the DOM object (underneath the mouse, when dragged) or the document (it doesn't seem to bubble).

如果您仔细查看浏览器的操作，它会“拖动”DOM 对象，在我的例子中是一个链接，释放时mouseup不会为 DOM 对象（在鼠标下方，拖动时）或文档（它不会）触发事件t 似乎冒泡）。

adding draggable="false"attr helps ...

添加draggable="false"attr 有助于...

<a href="#" draggable="false">link</a>

however, there is still an issue of the user highlighting/selecting something with their cursor and dragging the selected element(s).

但是，仍然存在用户使用光标突出显示/选择某些内容并拖动所选元素的问题。

Using the mouseoutevent also helps.

使用该mouseout事件也有帮助。

回答by James McCormack

If you need to handle dragging in jQuery why not use Draggable?

如果您需要在 jQuery 中处理拖动，为什么不使用Draggable呢？