mouseup 事件并不总是被触发答案

【问题标题】：mouseup event isn't always triggeredmouseup 事件并不总是被触发
【发布时间】：2012-02-23 09:21:49
【问题描述】：

我有一个功能可以让我拖动一些东西。我的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 triggers svg eventtrigger

【解决方案1】：

尝试添加 e.preventDefault();在 each 事件方法中防止任何默认的 UA 活动。

例如

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

等等……

【讨论】：

事件前只需要一次。我在答案前 2 分钟想通了 :)。