javascript - जाँच अगर एक खींचें के बाद टचेंड आता है




jquery ios (3)

मेरे पास कुछ कोड हैं जो एक तालिका के वर्ग को बदलते हैं। एक फोन पर, कभी-कभी स्क्रीन के लिए तालिका बहुत चौड़ी होगी और उपयोगकर्ता सामग्री को देखने के लिए / स्क्रॉल करेगा। हालाँकि, जब वे टेबल को चारों ओर से छूते और खींचते हैं, तो यह प्रत्येक ड्रैग पर टचेंड को ट्रिगर करता है।

मैं यह देखने के लिए परीक्षण कैसे करूं कि टच-ड्रैग के परिणामस्वरूप टचडाउन आया या नहीं? मैंने ड्रैगस्टार्ट और ड्रैग को ट्रैक करने की कोशिश की, लेकिन मुझे वह काम नहीं मिला और यह एक अटूट दृष्टिकोण है। क्या ऐसा कुछ है जिसे मैं नीचे जोड़ सकता हूं जो अनिवार्य रूप से निर्धारित करेगा, "क्या यह टचेंड एक ड्रैग के अंत में आया था?"

$("#resultTable").on("touchend","#resultTable td",function(){ 
        $(this).toggleClass('stay');
});

आपकी मदद के लिए अग्रिम धन्यवाद।

पुनश्च - नवीनतम jquery का उपयोग करना, और जब एक नियमित क्लिक काम करता है, तो यह टचेंड की तुलना में बहुत धीमा है।


दो श्रोताओं का उपयोग करें:

पहले गलत के लिए एक चर सेट करें:

var dragging = false;

फिर ontouchmove सेट को सच में खींच रहा है

$("body").on("touchmove", function(){
      dragging = true;
});

फिर ड्रैग कम्पलीट पर, यह देखने के लिए जांचें कि क्या ड्रैगिंग सही है, और यदि ऐसा है तो ड्रैग टच के रूप में गिनें:

$("body").on("touchend", function(){
      if (dragging)
          return;

      // wasn't a drag, just a tap
      // more code here
});

स्पर्श अंत अभी भी आग लगाएगा, लेकिन आपकी टैप स्क्रिप्ट चलने से पहले ही समाप्त हो जाएगी।

अगली बार यह सुनिश्चित करने के लिए कि आप इसे पहले से ही ड्रैग के रूप में सेट नहीं कर रहे हैं, इसे वापस टच डाउन पर गलत पर रीसेट करें।

$("body").on("touchstart", function(){
    dragging = false;
});

@Lededge के घोल को छोटा करने के लिए, यह मदद कर सकता है।

$("body").on("touchmove", function(){
   dragging = true;
}).on("touchend", function(){
   if (dragging)
      return;
}).on("touchstart", function(){
   dragging = false;
});

लगता है मेरी समस्या का एक समाधान यहाँ पाया गया है:

http://alxgbsn.co.uk/2011/08/16/event-delegation-for-touch-events-in-javascript/

यह बिट कोड टचस्टार्ट के बाद किसी भी चाल का पता लगाता है ताकि टैप के बाद टैप व्यवहार को रोक दिया जा सके।

var tapArea, moved, startX, startY;

tapArea = document.querySelector('#list'); //element to delegate
moved = false; //flags if the finger has moved
startX = 0; //starting x coordinate
startY = 0; //starting y coordinate

//touchstart           
tapArea.ontouchstart = function(e) {

    moved = false;
    startX = e.touches[0].clientX;
    startY = e.touches[0].clientY;
};

//touchmove    
tapArea.ontouchmove = function(e) {

    //if finger moves more than 10px flag to cancel
    //code.google.com/mobile/articles/fast_buttons.html
    if (Math.abs(e.touches[0].clientX - startX) > 10 ||
        Math.abs(e.touches[0].clientY - startY) > 10) {
            moved = true;
    }
};

//touchend
tapArea.ontouchend = function(e) {

    e.preventDefault();

    //get element from touch point
    var element = e.changedTouches[0].target;

    //if the element is a text node, get its parent.
    if (element.nodeType === 3) { 
        element = element.parentNode;
    }

    if (!moved) {
        //check for the element type you want to capture
        if (element.tagName.toLowerCase() === 'label') {
            alert('tap');
        }
    }
};

//don't forget about touchcancel!
tapArea.ontouchcancel = function(e) {

    //reset variables
    moved = false;
    startX = 0;
    startY = 0;
};

यहां अधिक: https://developers.google.com/mobile/articles/fast_buttons





touch-event