mouseup事件并不总是被触发 [英] mouseup event isn't always triggered

问题描述

我有一个功能，允许我拖动一些东西。我的js：

  $（function（）{
 $（svgcanv）.css（'cursor'，' moz-grab'）; 
 
 var leftButtonDown = false; 
 $（document）.mousedown（function（e）{
 console.log（'pressed'）; 
 //鼠标左键被按下，设置标志
如果（e.which === 1）leftButtonDown = 1; 
}）; 
 
 $（文档）。 mouseup（function（e）{
 console.log（'released'）; 
 //鼠标左键被释放，清除标志
 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; 
i f（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）。 
 
 translateX = posX; 
 translateY = posY; 
 
 mainGroup.setAttribute（transform，translate（+ posX +，+ posY +）scale（+ currentZoomLevel +））; 
} 
}）; 
}）; 
  

问题是mouseup事件并不总是被触发。其他2工作正常。第一次我把事情周围的一切都行了。但是第二，如果我立即按下并拖动，mouseup将不被触发。如果我停止拖动，请点击某处然后再次拖动该脚本再次工作正常。

我的控制台（带有2个拖动，然后再次拖动）。注意连续2个按字符串 - 从mousedown记录）：

没有...那是一个SVG，需要拖动它，所以不能使用jQuery draggable。

解决方案

尝试添加e.preventDefault（）;在每个事件方法中，以防止任何默认的UA活动。

例如

  $（document）.mousedown（function ）{
 e.preventDefault（）; 
 console.log（'pressed'）; 
 //鼠标左键被按下，设置标志
 if（e.which == = 1）leftButtonDown = 1; 
}）; 
  

等等...

I have a function that allows me to drag a something around. My 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+")");                    
            }
        });               
    });

The problem is that mouseup event isn't always triggered. The other 2 works fine. First time I move things around everything works OK. But second if I press and drag immediately the mouseup won't be triggered. If I stop dragging, click somewhere then drag again the script works OK again.

My console (with 2 drags, then click then drag again. notice the 2 consecutive "pressed" strings - logged from the mousedown ):

And no... that is an SVG and need to drag inside it so can't use jQuery draggable.

解决方案

Try adding e.preventDefault(); in each event method to prevent any default UA activity.

E.g.

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

and so on...

这篇关于mouseup事件并不总是被触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！