处理拖动

Question

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

这是一个例子，如果你正常点击链接它可以工作，但当你拖动链接鼠标时不会发生：

Answer 1

处理拖动

在这里没有人提到的关键是，实际上是一个事件来记录拖拽的结束，正如其他答案所解释的那样，这里发生了什么。该活动名为dragend，因此您只需执行

即可

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

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

注册鼠标

然而，还有一种方法可以在return事件监听器中通过false click取消拖放行为，然后注册mouseup 1 {} document。

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

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

我觉得我必须做的唯一一点是，在一个独立的jsfiddle中，这完全有效，在我自己的代码中它没有，所以我正在倾听mouseup和{{ 1}}只是为了确定。

Answer 2

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

假设用户按下鼠标链接上的按钮，然后移动他的鼠标关闭链接，然后释放鼠标按钮。现在只有链接注册一个mousedown事件。

也许你可以这样做以解决问题：

为链接注册mousedown事件
为整个文档注册mouseup事件
当链接触发mousedown事件，然后文档触发mouseup事件时，您可以认为链接正在触发mouseup事件

Answer 3

我要解决的问题是将“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;
    }
});

Answer 4

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

一直以来的意图是，如果在鼠标按下鼠标之前将鼠标放在链接，按钮上，无论如何改变主意，都可以将光标从链接或按钮上移开，然后释放鼠标按钮，动作 - 链接，按钮，等等 - 不会发生。

根据设计，如果在鼠标移动之前光标移出项目，鼠标按钮不会被发送到接收鼠标的对象。

这是用户界面设计考虑因素。这就是为什么你应该编程，只需点击一下即可启动任何动作 - 而不仅仅是鼠标按下。

我向你保证，有时你可能想要对鼠标按下操作，例如拖动，但这是例外，如果操作正确，将会看到鼠标向上 - 除了IE的某些版本当你将光标从页面上拖下来时，鼠标向上将会丢失 - 向上，向左或向右。

如果你想移动东西并且能够看到鼠标，那么使用分区或链接之类的东西要好得多。

链接只是为了：链接到某些东西。是的，您可以编写在单击链接时执行的JavaScript代码 - href =“javascript：someFunction（）;”或者您可以编写onclick来执行某些操作，甚至可以将鼠标向上移除。但是，该链接旨在做一些不被拖延的事情。

使用分区或跨度并移动它。

鲍勃

Answer 5

如果仔细观察浏览器的作用，它会“拖动”DOM对象，在我的情况下是一个链接，在发布时，mouseup事件不会触发DOM对象（鼠标下方，拖动时））或文件（它似乎没有泡沫）。

添加draggable="false" attr帮助......

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

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

使用mouseout事件也有帮助。

Answer 6

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

拖动时的mouseUp事件

6 个答案:

处理拖动

注册鼠标