2013-04-11 9 views
13

मैं एक वेबपेज बनाने की कोशिश कर रहा हूं जो उपयोगकर्ता से स्पर्श को महसूस करता है और कैनवास के साथ ड्रैग और ऑब्जेक्ट करता है।एंड्रॉइड ब्राउजर: टचकैंकल को निकाल दिया जा रहा है अल्थॉट टचमोव ने रोक दिया है डीफॉल्ट

तो मैं कुछ इस तरह कर रहा हूँ:

var touchStart = function(e) { 
    e.preventDefault(); 
    // Do stuff 
} 
var touchMove = function(e) { 
    e.preventDefault(); 
    console.log("Touch move"); 
    // Move objs 
} 
var touchEnd = function(e) { 
    e.preventDefault(); 
    console.log("Touch start!"); 
    // clean up stuff 
} 
var touchCancel = function(e) { 
    e.preventDefault(); 

    // Oh NO touch cancel! 
    console.log("Touch cancel!"); 

} 
bindElemOrig.addEventListener('touchstart', touchStart, false); 
bindElemOrig.addEventListener('touchmove', touchStart, false); 
bindElemOrig.addEventListener('touchend', touchStart, false); 
bindElemOrig.addEventListener('touchcancel', touchStart, false); 

यह कुछ बिंदु तक ठीक काम करता है।

समस्या यह है कि जैसे ही मैं भी कई objs लोड के रूप में, मुझे लगता है कि touchmove बहुत समय लगता है प्रतिक्रिया करने के लिए, और स्पर्श करके रद्द ट्रिगर किया जाता है। समस्या यह है कि जैसे ही टचकैंकल ट्रिगर हो गया है मुझे अब टचमोव की घटनाएं नहीं मिलती हैं, और अब मैं आंदोलन को समझ नहीं सकता।

क्या किसी को भी इस समस्या का सामना करना पड़ा? मुझे एंड्रॉइड में बग के बारे में पता है जहां आपको रोकना चाहिए डीफॉल्ट (touchend event in ios webkit not firing?) लेकिन इस मामले में ऐसा लगता है कि यह स्मृति बोझ के कारण काम नहीं कर रहा है।

धन्यवाद!

+1

मुझे एंड्रॉइड 2.3 पर एक ही समस्या का सामना करना पड़ रहा है। एंड्रॉइड 4+ ठीक लगता है। क्या आपको इस विषय पर कुछ मिला? – dioslaska

+0

@ डीयोस्लास्का शिम @ https: // github।कॉम/टीएनटी-आरओएक्स/एंड्रॉइड-स्वाइप-शिम –

+0

भविष्य के संदर्भ के लिए, यहां उत्तर पूरी तरह से काम करता है: http://stackoverflow.com/questions/10367854/html5-android-touchcancel –

उत्तर

2

यह समस्या क्रोम/एंड्रॉइड में एक बग (सुविधा?) के कारण हो सकती है। this bug report देखें।

यह परीक्षण दर्शाता व्यवहार (JSFiddle):

<!DOCTYPE html> 
<html> 
    <head> 
    <title></title> 
    <script> 
     var delay = 200; 

     var haltEvent = function(event) { 
     event.preventDefault(); 
     event.stopPropagation(); 
     }; 

     var pause = function() { 
     var startTime = new Date().getTime(); 

     while (new Date().getTime() < startTime + delay); 
     }; 

     window.addEventListener('load', function() { 
     var target = document.querySelector('#target'); 
     var status = document.querySelector('#status'); 

     target.addEventListener('touchstart', function(event) { 
      haltEvent(event); 
      status.innerHTML = '[touchstart]'; 
     }, true); 

     target.addEventListener('touchmove', function(event) { 
      pause(); 
      haltEvent(event); 
      status.innerHTML = '[touchmove]'; 
     }, true); 

     target.addEventListener('touchend', function(event) { 
      status.innerHTML = '[touchend]'; 
     }, true); 

     target.addEventListener('touchcancel', function(event) { 
      status.innerHTML = '[touchcancel]'; 
     }, true); 
     }); 
    </script> 
    <style> 
     #target { 
     background-color: green; 
     height: 300px; 
     } 

     #status { 
     text-align: center; 
     } 
    </style> 
    </head> 
    <body> 
    <div id="target"></div> 
    <p id="status">[]</p> 
    </body> 
</html> 

मैं नहीं मिल रहा है स्पर्श करके रद्द घटना बेतरतीब ढंग से निकाल दिया जाए। इसके बजाए, जब भी टचमोव इवेंट हैंडलर से वापस आने के लिए ~ 200 एमएस लगते हैं तो इसे निकाल दिया जाता है।

+0

मैं –

+7

को छूने के लिए टचकैंकल बाध्यकारी द्वारा हल करता हूं "मैं स्पर्श करने के लिए टचकैंकल बाध्यकारी द्वारा हल" – FlavorScape

3

इस

var touchMove = function(e) { 
    e.preventDefault(); 
    setTimeout(function(){ 
     console.log("Touch move"); 
    // Move objs 

    }) 
} 

उपयोग setTimeout तरह touchmove में आप तर्क रैप करने के लिए इस समस्या को

0

Touchcancel विशेष रूप से स्पर्श घटनाओं का नियंत्रण लेने और इस तरह के पैन या ज़ूम के बाद के रूप में नियमित रूप से ब्राउज़र कार्रवाई करने के लिए डिज़ाइन किया गया है हल कर सकते हैं एक बहुत छोटा स्पर्श और कदम कार्रवाई (लगभग 20px, ब्राउज़र के आधार पर)।

आपका केवल विकल्प के लिए या तो कर रहे हैं:

  1. में स्विच करें सूचक घटनाक्रम और touch-action सीएसएस संपत्ति फायरिंग से as explained here को pointercancel को रोकने का उपयोग करें (अनुशंसित लेकिन एंड्रॉयड की आवश्यकता है 5 +)
  2. अंदर event.preventDefault() जोड़े आपका touchmove इवेंट हैंडलर, लेकिन यह स्क्रॉल, पैन, ज़ूम इत्यादि जैसे किसी भी डिफ़ॉल्ट क्रिया को भी अक्षम कर देगा

आप फ़ंक्शन के अंदर रद्द करने या preventDefault() को रोकने का प्रयास नहीं कर सकते हैं क्योंकि यह इसके लिए बहुत देर हो जाएगा; ब्राउज़र ने touchmove ईवेंट को सुनना बंद कर दिया है। यह डिज़ाइन द्वारा है, बग नहीं।

संबंधित मुद्दे