पृष्ठ पर तत्वों के साथ बातचीत करते समय स्वाइप घटनाओं को रोकें

Question

मैं एक आईपैड एप्लिकेशन बना रहा हूं जो अनिवार्य रूप से स्लाइड की एक श्रृंखला है।

जब मैंने एक स्लाइड पढ़ना समाप्त कर लिया है तो मैं अगली स्लाइड * (ज़िप्टो के स्वाइप का उपयोग करके) पर स्वाइप करने में सक्षम हूं जो विंडो को बदलता है। अगली स्लाइड पर स्थान। (स्वाइप घटना खिड़की से बंधी है। किसी को पूरे पृष्ठ पर काम करने की ज़रूरत है) ...

यहां समस्या है: कुछ स्लाइडों में बटन, ड्रैग करने योग्य आइटम इत्यादि जैसे इंटरैक्टिव तत्व होते हैं। समस्या यह है कि समस्या इनमें से कुछ इंटरैक्टिव तत्वों का उपयोग करते समय स्वाइप ईवेंट ट्रिगर किया जाता है।

क्या किसी को इन उदाहरणों में ट्रिगर करने से स्वाइप रोकने के तरीके से पता है? शायद एक संवेदनशीलता आदि सेटिंग्स?

मैं स्टंप्डया हूँ ...

शुभकामनाएं और बहुत धन्यवाद !!

Answer 1

रास्ता zepto स्पर्श घटनाओं का प्रबंधन करता है यह document.body पर touchstart, touchend, और touchmove घटनाओं के लिए श्रोताओं बांधता है। इसके बाद यह गणना करता है कि किस घटना को touchstart ईवेंट प्राप्त करने वाले तत्व पर एक ईवेंट भेजना और ट्रिगर करना है। यह घटना तब प्रत्येक तत्व के श्रोताओं को उजागर करने वाले डोम पेड़ के माध्यम से बुलबुले हो जाती है।

यह हमें रोकने कड़ी चोट की घटनाओं के दो तरीके देता है:

सबसे पहले, आप की तरह कुछ कर सकता है:

$('#my-child-element').bind('touchstart touchend touchup', function(event) { 
    event.stopPropagation(); 
}); 

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

कड़ी चोट घटनाओं को भी बुलबुला, आप भी सिर्फ उन विशिष्ट घटनाओं अपने तत्व यह है कि पेज परिवर्तन को सुनता करने के लिए बुदबुदाती से रोक सकता है क्योंकि स्वाइप:

$('#my-child-element').bind('swipeLeft swipeRight', function(event) { 
    event.stopPropagation(); 
}); 

यह आप अभी भी प्राप्त करने के लिए zepto अंदर घटनाओं उत्पन्न की अनुमति देगा अपने बाल तत्व लेकिन बाहर नहीं। ज़िप्टो टैप इवेंट अभी भी आपके बच्चे के सभी तत्वों के लिए काम करेगा।

यहाँ फिडल: http://jsfiddle.net/bnickel/dUuUd/

Answer 2

होप "excludedElements" विधि, तुम्हारी मदद करेगा नीचे की तरह।

$(".block").swipe({ 
    swipe: function (event, direction, distance, duration, fingerCount, fingerData) { 

    }, 
    excludedElements: ".link, a", 
    threshold: 0 
});