MouseUp не запускается после mousemove jQuery

Я видел множество этих проблем здесь и пытался реализовать их как исправления, но, похоже, ни одно из них не исправило.

У меня есть настройка скрипки здесь 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;
});

});​


person Owen    schedule 27.09.2012    source источник


Ответы (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();
    });

Обновленная скрипта: http://jsfiddle.net/johkoer/RjYnM/5/

PS: Live устарел, поэтому вам следует перейти к использованию on

person John Koerner    schedule 27.09.2012