событие mouseup не всегда запускается

У меня есть функция, которая позволяет мне перетаскивать что-то вокруг. Мои JS:

  $(function() {
        $( svgcanv ).css('cursor', '-moz-grab');

        var leftButtonDown = false;
        $(document).mousedown(function(e){
            console.log('pressed');
            // Left mouse button was pressed, set flag
            if(e.which === 1) leftButtonDown = 1;
        });

        $(document).mouseup(function(e){
            console.log('released');
            // Left mouse button was released, clear flag
            leftButtonDown = 0;
            $( svgcanv ).css('cursor', '-moz-grab');
            firstDragCanvas = 1;
        });

        $( mainGroup ).mousemove(function(e){
            if (leftButtonDown == 1)
            {
                $( svgcanv ).css('cursor', '-moz-grabbing');
                var posX = e.pageX;
                var posY = e.pageY;
                if (firstDragCanvas == 0)
                {
                    posX = e.pageX - canvasPosX;
                    posY = e.pageY - canvasPosY;
                }
                else
                {
                    canvasPosX = e.pageX - translateX;
                    canvasPosY = e.pageY - translateY;
                    posX = translateX;
                    posY = translateY;
                    firstDragCanvas = 0;
                }

                if (posX > 0)
                    posX = 0;

                if (posX < -canvasWidth + $("#holder").width())
                    posX = -canvasWidth + $("#holder").width();

                translateX = posX;
                translateY = posY;

                mainGroup.setAttribute("transform","translate("+posX+","+posY+") scale("+currentZoomLevel+")");                    
            }
        });               
    });

Проблема в том, что событие mouseup не всегда запускается. Остальные 2 работают нормально. Первый раз переворачиваю все работает нормально. Но во-вторых, если я нажму и перетащу сразу, мышка не сработает. Если я перестану перетаскивать, щелкну где-нибудь, а затем снова перетащу, скрипт снова работает нормально.

Моя консоль (с 2 перетаскиваниями, затем нажмите и снова перетащите. Обратите внимание на 2 последовательные «нажатые» строки - зарегистрированные с помощью mousedown ):

введите здесь описание изображения

И нет ... это SVG, и его нужно перетаскивать, поэтому нельзя использовать перетаскиваемый jQuery.


javascript events svg triggers eventtrigger
person zozo    schedule 23.02.2012    source источник

Ответы (1)


arrow_upward
5
arrow_downward

Попробуйте добавить e.preventDefault(); в каждом методе события, чтобы предотвратить любую активность UA по умолчанию.

E.g.

$(document).mousedown(function(e){
    e.preventDefault();
    console.log('pressed');
    // Left mouse button was pressed, set flag
    if(e.which === 1) leftButtonDown = 1;
});

и так далее...

person Robert Longson    schedule 23.02.2012
comment
Только один раз нужно до событий. Я понял это за 2 минуты до ответа :). - person zozo; 23.02.2012