HTML5 Canvas: Comment gérer souris mousedown mouseup

Question

Je jouais avec la toile html5 et a rencontré un problème.

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 
} 

Dans ce code, je fais un clic de souris sur la vue de la toile en effectuant un déplacement de la souris en traduisant par le décalage de la traînée. Mais j'ai aussi un événement click. En ce moment, chaque fois que je traîne ma souris et que je la lâche, elle exécute à la fois ONmouseup ET onclick.

Y a-t-il des techniques pour les rendre uniques?

Answer 1

Un clic événement se produit après un succès mousedown et mouseup sur un élément. Y at-il une raison particulière pour laquelle vous utilisez cliquez sur en haut des événements de la souris? Vous devriez être bien avec juste mousedown/mouseup, cliquez sur est un événement de commodité qui vous permet d'économiser un peu de codage.

je serais généralement le faire de cette façon:

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

Essayez de déclarer une variable telle que clickStatus = 0; et, au début de chaque fonction, vérifiez que la valeur est correcte.

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

Answer 3

dans le mouvement de la souris fonction définir un booléen dire qu'un mouvement est survenue, encompase tout le code dans mouseup et cliquez avec une instruction if pour vérifier qu'une traînée ne se produit pas. Après ces instructions if et avant la fin des fonctions, définissez le booléen dragging sur false.