Холст HTML5: как обрабатывать mousedown mouseup mouseclick

Я играл с холстом html5 и столкнулся с проблемой.

canvas.onmousedown = function(e){
        dragOffset.x = e.x - mainLayer.trans.x;
        dragOffset.y = e.y - mainLayer.trans.y;
        canvas.onmousemove = mouseMove;
}
canvas.onmouseup = function(e){
    canvas.onmousemove = null;
}

canvas.onmouseclick = mouseClick;

function mouseMove(e){
    mainLayer.trans.x = e.x - dragOffset.x;
    mainLayer.trans.y = e.y - dragOffset.y;
    return false;
}

function mouseClick(e){
    // click action
}

В этом коде я делаю щелчок мыши + перетащить панорамирование вида холста, переведя его смещением. Но у меня также есть событие click. Прямо сейчас, всякий раз, когда я перетаскиваю мышь и отпускаю ее, она запускается как onmouseup, так и onclick.

Существуют ли какие-либо методы, чтобы сделать их уникальными?

Ответы

Ответ 1

Событие клика происходит после успешной мыши и мыши на элементе. Есть ли какая-то конкретная причина, по которой вы используете клик над событиями мыши? Вы должны быть в порядке с помощью mousedown/mouseup, щелчок - это событие удобства, которое экономит вам немного кодирования.

Обычно я делал это так:

var mouseIsDown = false;

canvas.onmousedown = function(e){
    dragOffset.x = e.x - mainLayer.trans.x;
    dragOffset.y = e.y - mainLayer.trans.y;

    mouseIsDown = true;
}
canvas.onmouseup = function(e){
    if(mouseIsDown) mouseClick(e);

    mouseIsDown = false;
}

canvas.onmousemove = function(e){
    if(!mouseIsDown) return;

    mainLayer.trans.x = e.x - dragOffset.x;
    mainLayer.trans.y = e.y - dragOffset.y;
    return false;
}

function mouseClick(e){
    // click action
}

Ответ 2

Попробуйте объявить переменную типа clickStatus = 0; и в начале каждой проверки функции, чтобы обеспечить правильное значение.

if (clickstatus == 0) {
     clickstatus =1;
     ...//function code
 };

Ответ 3

в перемещении мыши мыши задайте логическое значение, чтобы сказать, что произошло перемещение, encompase весь код в mouseup и щелкните с инструкцией if, чтобы проверить, что перетаскивание не произошло. После этих операторов if и до конца функций установите для перетаскивания булево значение false.