Question

似乎只有在鼠标移动不与mousemove结合时才会触发mouseup事件。换句话说，按下鼠标左键放开，然后触发mouseup。但是，如果您拖动图像然后放开，则不会触发任何鼠标。以下示例显示了此行为：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<div id="Out">
    <img id="Img" src="http://sstatic.net/so/img/logo.png" width=500>
</div>
<script language=JavaScript>
    $(function() {
        $(document).bind("mouseup",function() {alert("UP");});
        //$("#Out").bind("mouseup",function() {alert("UP");});
        //$("#Img").bind("mouseup",function() {alert("UP");});
    });
</script>

如果您加载此项，然后单击并放开，“向上”将发出警报。但是，如果你拖动然后放手，则不会触发UP。

如何在mousemove完成后触发mouseup，或者如何检查mousemove事件以确定鼠标左键现已关闭？

Answer 1

这是我使用 alot 的模式，通常可以很好地处理与mousemove相关的所有事情。当用户点击mousedown时，mouseup事件被绑定，这会强制它在用户放开鼠标按钮时触发，无论它移动了多少。

$('#element').mousedown(function(e) {

    // You can record the starting position with
    var start_x = e.pageX;
    var start_y = e.pageY;

    $().mousemove(function(e) {
        // And you can get the distance moved by
        var offset_x = e.pageX - start_x;
        var offset_y = e.pageY - start_y;

        return false;
    });

    $().one('mouseup', function() {
        alert("This will show after mousemove and mouse released.");
        $().unbind();
    });

    // Using return false prevents browser's default,
    // often unwanted mousemove actions (drag & drop)
    return false;
});

Answer 2

不要忘记命名您的事件，否则所有事件处理程序都将被解除绑定：

$('#element').bind('mousedown.namespace', function(e) {
    $(document).one('mouseup', function() {
        callback_func();
        $(document).unbind('mousedown.namespace');
    });
 });

Answer 3

从JQuery 1.4开始，您需要将$（'document'）替换为$（）。事实上，我正在使用它在JQuery UI对话框中创建一个菜单，它似乎捕获了mousemove事件。所以我只是将我的容器div替换为$（）（看起来像$（'＃myContainerDiv'））。这似乎也很好。

Answer 4

我有类似的问题，这对我有用：

$(document).on("dragend", function(e){
  $(e.target).trigger("mouseup");
  e.preventDefault();
});

Answer 5

我发现当我使用下面的CSS将文本设置为无法选择时，mouseup事件也会被禁止 - 也许这会帮助其他人。

-moz-user-select: none;
-khtml-user-select: none;
user-select: none;

Answer 6

我遇到了与KineticJS对象类似的问题。使用kinetic的dragend代替mouseup解决了这个问题。

Answer 7

我遇到了同样的问题。即使我在mousedown处理程序中添加e.preventDefault()，它仍然没有解决。

最后，我发现如果我在mousemove处理程序中关闭以下代码，则会正常调用我的mouseup处理程序。

     mouseDragArea.css({
         top: dragAreaPos.y + 'px',
         left: dragAreaPos.x + 'px',
         width: Math.abs(mouseCurPos.x - mouseClickPos.x) + 'px',
         height: Math.abs( mouseCurPos.y - mouseClickPos.y ) + 'px'
     });

mouseDragArea是一个以编程方式创建的元素，它有一个虚线边框，用于显示鼠标点击拖动的矩形区域：

    mouseDragArea = $('<div id="mouse-drag-area"></div>');

然后，我意识到这个#mouse-drag-area元素超出了处理mouseup事件的原始元素。因此，在将以下css声明添加到#mouse-drag-area后，它将被排序：

    pointer-events:none;

换句话说，关键是你要为你的mouseup处理程序设置哪个元素。

鼠标移动完成后如何让鼠标触发

7 个答案: