मैं एक वेबपृष्ठ पर सरल ड्रॉ पैड बनाने के लिए एचटीएमएल 5 कैनवास + कुछ जावास्क्रिप्ट (ऑनमोस्डउन/मूव/अप) का उपयोग कर रहा हूं।जावास्क्रिप्ट + एचटीएमएल 5 कैनवास: मोबाइल उपकरणों पर खींचने/स्क्रॉल करने के बजाए ड्राइंग?
ओपेरा, फ़ायरफ़ॉक्स, क्रोम, आदि में ठीक काम करता है (डेस्कटॉप पीसी पर कोशिश की गई)। लेकिन अगर मैं इस पृष्ठ पर आईफोन के साथ जाता हूं, तो कैनवास पर आकर्षित करने की कोशिश करते समय, यह पृष्ठ को ड्रैग या स्क्रॉल करता है।
यह पेज को नीचे स्लाइड करके अन्य पेज सामग्री के लिए ठीक है, आप सामान्य रूप से मोबाइल ब्राउज़र में पेज के माध्यम से नेविगेट कर सकते हैं। लेकिन क्या इस व्यवहार को कैनवास पर अक्षम करने का कोई तरीका है, ताकि मोबाइल विज़िटर वास्तव में कुछ भी आकर्षित कर सकें?
<html><head><script type='text/javascript'>
function init()
{
var canvas = document.getElementById('MyCanvas');
var ctx = canvas.getContext('2d');
var x = null;
var y;
canvas.onmousedown = function(e)
{
x = e.pageX - canvas.offsetLeft;
y = e.pageY - canvas.offsetTop;
ctx.beginPath();
ctx.moveTo(x,y);
}
canvas.onmouseup = function(e)
{
x = null;
}
canvas.onmousemove = function(e)
{
if (x==null) return;
x = e.pageX - canvas.offsetLeft;
y = e.pageY - canvas.offsetLeft;
ctx.lineTo(x,y);
ctx.stroke();
}
}
</script></head><body onload='init()'>
<canvas id='MyCanvas' width='500' height='500' style='border:1px solid #777'>
</canvas></body></html>
कुछ विशेष शैली या घटना मैं कैनवास को जोड़ने के लिए है, ताकि खींच/पेज स्क्रॉल जब कैनवास में स्वाइप से बचने के लिए:
आपके संदर्भ के लिए, यहाँ एक minimalisic उदाहरण है?
आह, समझ में आता है। इससे पहले कभी नहीं देखा। धन्यवाद! –
एंड्रॉइड पर यह काम नहीं करता है, लेकिन आप 'e.preventDefault();' चश्मा के अनुसार उपयोग कर सकते हैं http://www.w3.org/TR/touch-events/#the-touchstart------ --- घटना – lapo