HTML5 Canvas: Как обрабатывать mousedown mouseup mouseclick

Question

Я играл с холстом 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.

Есть ли какие-либо приемы, чтобы сделать их уникальными?

Answer 1

нажмите событие происходит после успешного MouseDown и MouseUp на элементе. Есть ли какая-то конкретная причина, по которой вы используете , нажмите поверх событий мыши? Вы должны быть в порядке с 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 
} 

Answer 2

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

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

Answer 3

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