एचटीएमएल 5 कैनवास: mousedown माउसअप माउसक्लिक

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 
} 

इस कोड में, मैं अपने माउस क्लिक + खींचें खींचें ऑफसेट द्वारा अनुवाद द्वारा कैनवास दृश्य पैन बनाते हैं। लेकिन मेरे पास एक क्लिक इवेंट भी है। अभी, जब भी मैं अपना माउस खींचता हूं और जाने देता हूं, तो यह दोनों ऑन-हाउसअप और ऑनक्लिक चलाता है।

क्या उन्हें अद्वितीय बनाने के लिए कोई तकनीक है?

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

समारोह माउस चाल में

कि एक चाल, हुई mouseup में सभी कोड encompase कहना और अगर बयान की जांच करने के लिए कि एक खींचें नहीं होती है एक साथ क्लिक करने के लिए एक बूलियन निर्धारित किया है। इनके बाद यदि कथन और कार्यों के अंत से पहले ड्रैगिंग बुलियन को झूठा सेट किया गया है।