jquery - mousemove jQuery 后 MouseUp 不触发

Question

我在这里看到了一系列此类问题，并尝试将它们作为修复程序来实现，但似乎没有一个能够解决。

我在这里有一个 fiddle 设置 http://jsfiddle.net/OwenMelbz/RjYnM/

问题是，一旦拖动了该框，您必须先单击，然后它才会注册 mouseup 事件。

这是 js(抱歉有很多)

$(function() {
var pageID = document.location.pathname;
var defaultMarkup = document.documentElement.innerHTML;

$('.feedback-menu').attr('data-pageId', pageID);

$('.feedback-tab').click(function() {
    var state = $(this).attr('data-state');

    if (state == "closed") {
        $(this).attr('data-state', 'open');
        $('.feedback-menu').animate({
            'right': '-1px'
        });
        $('.feedback-tab').animate({
            'right': '100px'
        });
    }
    else {
        $(this).attr('data-state', 'closed');
        $('.feedback-menu').animate({
            'right': '-102px'
        });
        $('.feedback-tab').animate({
            'right': '-1px'
        });
    }
});

$('body').append("<div class='feedback-overlay' style='display:none;'></div>");

$('.feedback-btn').live('click', function() {
    setupCanvas();
});

var setupCanvas = function() {
    var overlayMarkup = "<div class='feedback-overlay'></div>";
    var docHeight = $(document).outerHeight();
    var docWidth = $(document).outerWidth();


    $('.feedback-overlay').css({
        'width': docWidth,
        'height': docHeight,
        'display': 'block'
    });

};

var startDrawing = function() {
    initDraw();
};

window.bugID = 0;
window.canvas = $('.feedback-overlay');

canvas.live('mousedown', function(e) {

    if(e.target != this){ return true; }

    bugID++;

    window.click_y = e.pageY;
    window.click_x = e.pageX;


    canvas.append('<div class="selection-box" id="bugID-' + bugID + '"></div>');

    window.bugBox = $('#bugID-' + bugID);

    bugBox.css({
        'top': click_y,
        'left': click_x,
        'width': 0,
        'height': 0
    });

    canvas.mousemove(function(e) {

        var move_x = e.pageX,
            move_y = e.pageY,
            width = Math.abs(move_x - click_x)-10,
            height = Math.abs(move_y - click_y)-10;

        bugBox.css({
            'width': width,
            'height': height
        });
        if (move_x < click_x) { //mouse moving left instead of right
            bugBox.css({
                'left': click_x - width
            });
        }
        if (move_y < click_y) { //mouse moving up instead of down
            bugBox.css({
                'top': click_y - height
            });
        }
        return false;
    });

    canvas.one('mouseup', function(e) {

        bugBox.draggable().resizable();
        if (bugBox.width() < 50 || bugBox.height() < 50) {
            bugBox.remove();
        }
        $().unbind();
        });

        return false;
});

});​

Answer 1

尝试在鼠标向上方法中使用$(this).unbind();:

canvas.one('mouseup', function(e) {
    console.log("a");
    bugBox.draggable().resizable();
    if (bugBox.width() < 50 || bugBox.height() < 50) {
        bugBox.remove();
    }
    $(this).unbind();
    });

更新的 fiddle :http://jsfiddle.net/johnkoer/RjYnM/5/

PS:Live 已被弃用，因此您应该转向使用 on