18

似乎mouseup事件仅在不与 a 结合时才会触发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。

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

4

7 回答 7

25

这是我经常使用的一种模式，通常在与 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;
});
于 2009-12-15T19:26:39.503 回答
5

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

$('#element').bind('mousedown.namespace', function(e) {
    $(document).one('mouseup', function() {
        callback_func();
        $(document).unbind('mousedown.namespace');
    });
 });
于 2010-11-23T10:38:05.593 回答
1

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

于 2010-08-30T15:36:22.030 回答
1

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

$(document).on("dragend", function(e){
  $(e.target).trigger("mouseup");
  e.preventDefault();
});
于 2015-07-22T07:05:37.030 回答
0

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

-moz-user-select: none;
-khtml-user-select: none;
user-select: none;
于 2012-09-18T18:29:18.163 回答
0

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

于 2014-01-02T16:36:28.357 回答
0

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

最后，我发现如果我在 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 处理程序。

于 2016-04-01T09:59:03.960 回答