आईओएस और एंड्रॉइड

Question

में ड्रैग पर पेज स्क्रॉल को रोकें मैं एचटीएमएल 5 कैनवास गेम पर काम कर रहा हूं, लेकिन मुझे नहीं पता कि टच इवेंट कैसे संभालें। जब कोई उपयोगकर्ता स्क्रीन को स्पर्श करता है, और खींचता है, तो ब्राउज़र पृष्ठ को स्क्रॉल करेगा। मैं इसे रोकना चाहता हूं, और स्पर्श शुरू करना चाहता हूं, और अंत स्थिति को स्पर्श करना चाहता हूं। क्या यह संभव है?

अग्रिम धन्यवाद

Answer 1

पृष्ठ को खींचने वाले स्पर्शियों को रोकने के लिए आपको डिफ़ॉल्ट स्पर्श व्यवहार को ओवरराइड करने की आवश्यकता है। जाहिर है, यदि आपका पृष्ठ उपलब्ध क्षेत्र से बड़ा हो जाता है, तो आपको उन्हें फिर से संभालना होगा, लेकिन जैसा कि आप एक गेम बना रहे हैं, मान लें कि आप 100%/100% लेआउट कर रहे हैं।

यह कोड फोनगैप डिफ़ॉल्ट index.html से है लेकिन आपकी मदद करेगा, मुझे यकीन है।

function preventBehavior(e) { 
    e.preventDefault(); 
}; 

document.addEventListener("touchmove", preventBehavior, false); 

मैं एक और चीज जोड़ना चाहता हूं जो आप ढांचे से बचने के लिए सही रास्ते पर हैं। वे कुछ चीजों के लिए बहुत अच्छे हैं, लेकिन आप जमीन से निकलने वाले बहुत अच्छे परिणाम प्राप्त करेंगे।

संपादित करें: यहां W3C working draft स्पर्श ईवेंट के बारे में बात कर रहा है, जो आपके लिए आसान हो सकता है।

Answer 2

canvas.addEventListener('touchstart', function(e) 
{ 
    alert(e.changedTouches[0].pageX + " " + e.changedTouches[0].pageY); 
} 
canvas.addEventListener('touchend', function(e) 
{ 
    alert(e.changedTouches[0].pageX + " " + e.changedTouches[0].pageY); 
} 

यहाँ छू और मोबाइल फोन पर इशारा के बारे में एक अच्छा लेख है:

http://www.sitepen.com/blog/2008/07/10/touching-and-gesturing-on-the-iphone/

Answer 3

आप तो jQuery मोबाइल या किसी अन्य पुस्तकालय का उपयोग नहीं करना चाहते हैं आप इसे आजमा सकते हैं।

var startX, startY, endX, endY; 
document.addEventListener("touchstart", function(e){ 
    startX = e.touches[0].pageX; 
    startY = e.touches[0].pageY; 

    e.preventDefault();//Stops the default behavior 
}, false); 

document.addEventListener("touchend", function(e){ 
    endX = e.touches[0].pageX; 
    endY = e.touches[0].pageY; 

    e.preventDefault();//Stops the default behavior 
}, false); 

Answer 4

क्रोम के हाल के संस्करणों में किए गए परिवर्तनों को तोड़ने के कारण, उपर्युक्त उत्तर अब सही नहीं हैं। दस्तावेज़ या बॉडी तत्वों के लिए टच इवेंट श्रोता को संलग्न करने से ईवेंट श्रोता को "निष्क्रिय" मोड में पंजीकृत किया जाएगा, जिससे preventDefault पर कॉल को अनदेखा किया जा सकता है।

दो समाधान हैं:

• पसंदीदा समाधान निर्दिष्ट करने के लिए है कि कोई स्क्रॉल होना चाहिए सीएसएस शैली touch-action उपयोग करने के लिए है (उदाहरण के मूल्य "कोई नहीं" के साथ)

• मामलों में जहां में यह उचित नहीं है (उदाहरण के लिए यदि बातचीत का प्रकार गतिशील रूप से उस तरीके से बदलना चाहिए जिसे इशारा शुरू होने से पहले निर्धारित नहीं किया जा सकता है) तो ईवेंट श्रोता को तीसरे पैरामीटर सेट के साथ { passive: false } पर पंजीकृत होना चाहिए (आपको यह सुनिश्चित करने के लिए ब्राउज़र का पता लगाना चाहिए शैली पहले समर्थित है, टी hough)।