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

Question

看起来mouseup事件只有在它们不与mousemove结合时才被触发.换句话说,按下鼠标左键放开,然后触发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事件以确定鼠标左键现已关闭？

Answer 1

这是我使用的模式很多,一般工作得非常好就与鼠标移动所有的东西.当用户单击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');
    });
 });