Вопрос по javascript, html5, canvas – HTML5 Canvas: как обрабатывать мышиный клик мышью

13

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

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
}

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

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

Проверь это!stackoverflow.com/questions/7224175/html5-canvas-mouse/… Munkh

Ваш Ответ

3   ответа
0

clickStatus = 0; и в начале каждой функции проверяйте правильность значения.

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

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

Я бы вообще сделал это так:

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
}
0

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

Похожие вопросы