Question

我对Javascript很新，需要帮助。我在画布上显示图像，我希望在拖动此图像时获得不同的事件：例如，使用鼠标的midle按钮拖动时进行缩放，使用鼠标右键拖动图像时进行平移。 ..我在使用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上。它在Chrome中工作实际上有点奇怪，因为从逻辑上讲，鼠标位置实际上与当前关键的按钮无关。你想检查mouseup和mousedown监听器上的event.which。这也允许您一次拖动多个按钮（如果这是有用的）。

此外，我更喜欢使用console.log（）来alert（）进行调试，因为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');
    }
});

用鼠标左键，中键和右键拖动（jquery事件）

1 个答案: