一旦mousemove完成，如何让mouseup触发答案

【问题标题】：How to get mouseup to fire once mousemove complete一旦mousemove完成，如何让mouseup触发
【发布时间】：2009-12-15 19:23:55
【问题描述】：

似乎mouseup 事件仅在不与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”会发出警报。但是，如果您拖动然后松开，则不会触发 UP。

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

【问题讨论】：

标签： javascript html jquery jquery-events

【解决方案1】：

这是我使用的一种模式alot，在所有与mousemove 相关的事情上都非常有效。 mouseup 事件在用户单击 mousedown 时被绑定，这会在用户松开鼠标按钮时强制触发它，无论它移动了多少。

$('#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;
});

【讨论】：

不错。它有效，但只有一次。我做了一个快速的改变，让它无限地作用于整个页面。 jsbin.com/ajidi 从那里可能会做得更好，但我认为这是一个非常酷的解决方案。
这看起来不错，希望我能把它整合到真正的交易中，然后我会检查这个作为答案
当然，您不想取消 mousedown 及其所有副作用。您可能只想同时收听 mouseup 和 dragend，并将它们都视为 mouseup。
这项工作很棒。我无法让 $() 工作，所以我用 $('body') 替换了它。一个挑剔的是，如果你拖出屏幕，用户必须再次点击——在这种情况下，你可以在 mousemove 中检查 e.which 并在那里结束拖动
简洁有效。如果您只想在 mouseup 上调用函数，则可以进一步简化。 $('#element').mousedown(function () { $(document).one('mouseup', mouseReleased); return false; });

【解决方案2】：

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

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

【讨论】：

我真的需要谢谢你！很长一段时间我完全迷失了方向，想知道为什么 mouseup 事件没有触发……这条评论让光明重获新生！
很好的解决方案。对于跨元素 mousedown-mouseup 情况，我尝试了许多其他替代方案，但均未成功。将click 添加到one 的事件中完成了我需要的实现，适用于用户没有将鼠标拖到绑定元素之外的情况。

【解决方案3】：

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

【讨论】：

【解决方案4】：

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

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

【讨论】：

【解决方案5】：

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

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

【讨论】：

【解决方案6】：

我对 KineticJS 对象也有类似的问题。使用动力学的dragend 而不是mouseup 解决了这个问题。

【讨论】：

【解决方案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 事件的原始元素。所以在#mouse-drag-area中加入如下css声明后，就排序了：

    pointer-events:none;

换句话说，关键在于您要为哪个元素设置 mouseup 处理程序。

【讨论】：