鼠标左、中、右拖动（jquery事件）

Question

我对 Javascript 非常陌生，需要一些帮助。我在画布中显示一个图像，并且我希望在拖动该图像时获得不同的事件：例如，使用鼠标中键拖动时缩放，使用鼠标右键拖动图像时进行平移。 .. 使用 Chrome 时，我能够捕捉到这些事件，但是当我使用 Firefox 尝试时，我的代码不起作用。你能给我一些帮助吗？这是我的代码：

isDragging = false;
// Mousedown : isDragging is true and get mouse position
$("#s1").bind('mousedown', function(event)
{
    isDragging = true;
});
// Mouseup : isDragging is false
$("#s1").bind('mouseup', function(event)
{
    isDragging = false;
});
// Mousemove : handle window level, translation, zoom, slice changing
$("#s1").bind('mousemove', function(event)
{
    if (isDragging) 
    {
        switch (event.which) 
        {
            case 1 : // left : window level
                alert('left dragging');
                break;
            case 2 : // mousewheel : zoom
                alert('mousewheel dragging');
                break;
            case 3 : 
                alert('right dragging');
                break;
            default :
        }
    }
});

Answer 1

我玩过它并想通了。似乎 Firefox 没有在 mousemove 上发送正确的 event.which。它在 Chrome 中工作实际上有点奇怪，因为从逻辑上讲，鼠标位置不应该与当前按下的按钮真正相关。 您想在 mouseup 和 mousedown 侦听器上检查 event.which。这也使您可以一次拖动多个按钮（如果有用的话）。

另外，我更喜欢使用 console.log() 到 alert() 进行调试，因为警报会停止一切。在任何浏览器中按 F12 以查看 javascript 控制台。

希望对您有所帮助！ :D

leftIsDragging   = false;
middleIsDragging = false;
rightIsDragging  = false;  

$(document).bind('mousedown', function(event) {

    switch (event.which) {
        case 1:
            console.log('Left mouse down.');
            leftIsDragging   = true;
            break;
        case 2:
            console.log('Middle mouse down.');
            middleIsDragging = true;
            break;
        case 3:
            console.log('Right mouse down.');
            rightIsDragging   = true;
            break;
        default:
             console.log('Other mouse down.');
    }
});

$(document).bind('mouseup', function(event) {

    switch (event.which) {
        case 1:
            console.log('Left mouse up.');
            leftIsDragging   = false;
            break;
        case 2:
            console.log('Middle mouse up.');
            middleIsDragging = false;
            break;
        case 3:
            console.log('Right mouse up.');
            rightIsDragging  = false;
            break;
        default:
             console.log('Other mouse up.');
    }
});

$(document).bind('mousemove', function(event) {
    if (leftIsDragging) 
    {
        console.log('left dragging');
    }
    if (middleIsDragging) 
    {
        console.log('mousewheel dragging');
    }
    if (rightIsDragging) 
    {
        console.log('right dragging');
    }
});