代码之家 › 专栏 › 技术社区 › jwl

鼠标移动完成后如何启动鼠标组

javascript-events html jquery javascript

jwl · 技术社区 · 16 年前

似乎只有当mouseup事件不与mousemove结合时才会触发。换句话说,按下鼠标左键,放开鼠标,鼠标启动。但是如果你拖动图像然后放开,就不会触发鼠标。下面是一个显示此行为的示例:

<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>

如果您加载这个,然后单击并放开,“向上”将发出警报。但是,如果你拖拽然后放手,就不会被解雇。

当mousemove完成时,如何启动mouseup,或者如何检查mousemove事件以确定鼠标左键现在已关闭?

7 回复 | 直到 10 年前

Tatu Ulmanen 16 年前

这是我用的模式 阿洛特 ,通常在所有与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;
});

franzlorenzon 13 年前

不要忘记为事件命名,否则将取消绑定所有事件处理程序:

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

James Ellis-Jones 15 年前

从jquery 1.4开始,您需要用$()替换$(“document”)。实际上,我正使用它在jquery ui对话框中创建一个菜单,这个对话框似乎会捕获mousemove事件。因此,我只需将容器div替换为$()(看起来类似于$(myContainerDiv))。这似乎也很管用。

Dustin Poissant 10 年前

我也遇到了类似的问题,这对我很有效:

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

TimDog 13 年前

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

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

Bill Hoag 12 年前

我对KineticJS对象也有类似的问题。动能学 dragend 而不是 mouseup 解决了问题。

gm2008 10 年前

我也遇到过同样的问题。即使在我加上 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声明添加到 #鼠标拖动区域 ,排序:

    pointer-events:none;

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