एसवीजी तत्वों के लिए गतिशील रूप से अक्षम-स्पर्श (ओवरक्रॉल)

Question

मुझे क्रोम पर टच स्क्रीन ओवरक्रॉलिंग में समस्याएं आ रही हैं।

मैं इसमें बजे एसवीजी तत्व है, जो कुछ आकार में शामिल है के साथ एक दस्तावेज़ है, का कहना है कि एक आयत:

अब, मैं आयत खींचने योग्य बनाने के लिए, जिसका अर्थ है कि मैं अक्षम करना चाहते चाहते हैं संबंधित <rect> तत्व पर सभी प्रकार की स्पर्श कार्रवाइयां, इसकी स्टाइल प्रॉपर्टी touch-action: none सेट करके।

यह क्रोम को छोड़कर, सभी डेस्कटॉप ब्राउज़रों पर ठीक काम करता है। क्रोम पर, जब मैं एक आयताकार को स्पर्श करता हूं और स्थानांतरित करता हूं, ब्राउज़र की ओवरस्क्रॉल सुविधा में प्रवेश होता है। इससे ब्राउजर विंडो अजीब तरह से आगे बढ़ती है, साथ ही साथ आयताकार पर सेट की गई सभी पॉइंटर घटनाएं रद्द होती हैं।

आईई। pointermove दूसरे के एक अंश के लिए पंजीकृत है, तो यह तब बंद हो जाता है जब overscroll kicks में pointerup को कभी भी स्पर्श नहीं किया जाता है।

अब, अगर मैं के बजाय किसी HTML तत्व एक एसवीजी तत्व, touch-action: none की स्थापना काम करना होता था। एक एसवीजी तत्व पर एक ही बात विफल रहता है।

तकनीकी तौर पर, यह या तो document.body पर स्थापित करने touch-action: none या touch-action: none सेट के साथ एक <div> तत्व में पूरी एसवीजी लपेटकर द्वारा हल किया जा सकता है।

दुर्भाग्यवश, यह मेरे लिए एक विकल्प नहीं है क्योंकि मुझे सीधे अपने आयत पर छोड़कर, इसके सभी मूल स्पर्श संकेतों को बनाए रखने के लिए दस्तावेज़ (और शेष आयत के आसपास के एसवीजी) की आवश्यकता होती है।

एक समाधान के रूप में, मैंने document: body पर गतिशील रूप से सेट करने का प्रयास किया था जब pointerdown घटना आयताकार पर होती है।

// Get element 
var o = document.getElementById("test"); 

// disable touch action on press of the SVG element 
o.addEventListener("pointerdown", function(e) { 
    document.body.style.touchAction = "none"; 
}); 

// re-enable touch action when released 
o.addEventListener("pointerup", function(e) { 
    document.body.style.touchAction = "auto"; 
}); 

दुर्भाग्यवश, इससे मदद नहीं मिलती है। शरीर पर शैली सेट हो जाती है और अगली बार जब मैं आयत खींचने की कोशिश करता हूं तो यह अपेक्षित काम करता है (क्योंकि pointerup घटना कभी निष्पादित नहीं होती है), बस इस बार नहीं।

ईवेंट हैंडलर को preventDefault() जोड़ना भी कोई प्रभाव नहीं पड़ता है।

मैं इस बात की सराहना करता हूं कि अगर कोई ऐसा अनुभव अनुभव करता है तो वह समाधान साझा कर सकता है।

यहां उपरोक्त का एक लाइव उदाहरण है।

// Get element 
 
var o = document.getElementById("test"); 
 

 
// disable touch action on press of the SVG element 
 
o.addEventListener("pointerdown", function(e) { 
 
    document.body.style.touchAction = "none"; 
 
}); 
 

 
// re-enable touch action when released 
 
o.addEventListener("pointerup", function(e) { 
 
    document.body.style.touchAction = "auto"; 
 
});

<svg id="test" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="width: 300px; height: 300px; border: 1px solid #eee;"> 
 
    <g transform="translate(50,50)"> 
 
    <rect fill="#00fff0" width="200" height="200" style="touch-action: none;"></rect> 
 
    </g> 
 
</svg>

---

अद्यतन: चाल एक touchstart घटना पर preventDefault() का उपयोग करता है की तरह लग रहा है।

हालांकि, यह एक ही समय में दोनों आधुनिक pointerdown और विरासत touchstart उपयोग करने के लिए गलत हो रहा है। यह क्रोम 60 में एक बग की तरह लगता है।अगर कोई इसकी पुष्टि कर सकता है, तो यह बहुत अच्छा होगा।

Answer 1

मुझे लगता है कि यह touchstart रोकने के द्वारा पर्याप्त होगा:

window.addEventListener("touchstart", function(e) { 
    // Determine wether or not you are panning from rectangle: 
    if (e.target ....) 
     e.preventDefault(); 
});