jQuery (स्वाइप बनाम टच) पेजएक्स और पेजवाई 0

Question

लौटते रहें मैं अपने आईफोन पर टचस्टार्ट और टचइंड घटनाओं के साथ खेल रहा हूं। मैंने एक नमूना पृष्ठ बनाया है जिसमें div है कि यदि आप इसे स्पर्श करते हैं और पृष्ठ को स्क्रॉल करते हैं, तो इसे प्रारंभ और अंत स्थिति के y निर्देशांक वापस करना चाहिए।

लिंक: http://jsbin.com/ibemom/2

jQuery:

var touchStartPos; 

$('.theDiv') 
    .bind('touchstart', function(e){ 
    touchStartPos = e.pageY; 
    }) 
    .bind('touchend', function(e){ 
    alert(touchStartPos + ' | ' + e.pageY) 
    }) 

जब मैं अपने iPhone पर कि पृष्ठ लोड है, तथापि, चेतावनी शून्य के रूप में दोनों मान रिपोर्ट रहता है। मेरे पास जो कुछ है उसके साथ कुछ भी गलत है?

अद्यतन:

मैं jQuery मोबाइल परियोजना में कोड के इस बिट भर में ठोकर खाई: https://github.com/jquery/jquery-mobile/issues/734

एक यह टिप्पणी से इसे बाहर अटक:

// (in iOS event.pageX and event.pageY are always 0) 

यह क्यों नहीं कहती यह मामला है, लेकिन कम से कम मुझे किसी और को मिला जो एक ही चीज़ को देखता है। यह देखने के लिए कि समाधान वहां है या नहीं, उस पृष्ठ पर नमूना कोड के माध्यम से खोद जाएगा।

अद्यतन द्वितीय:

ठीक है, ऊपर के लिंक में नमूना कोड के माध्यम से देखने के बाद, यह इस तरह दिखता है एक वास्तविक मान प्रदान करेंगे:

e.originalEvent.touches[0].pageY 

पकड़ है, मैं अब पता है कि नहीं है मुझे बहुत जरूरत है यह उस क्षेत्र के वाई ऑफ़सेट को वापस कर रहा है जिसे मैंने ऑब्जेक्ट में छुआ था जिसे मैंने ब्राउज़र विंडो की बजाय HTML दस्तावेज़ में सम्मिलित किया था।

मेरा लक्ष्य यह पता लगाने के लिए है कि स्क्रीन पर स्पर्श कहां से शुरू हुआ था, और यह कहां समाप्त हुआ ... और फिर मानों की तुलना करें। यदि वे काफी अलग हैं, तो हम एक स्पर्श के बजाए एक स्वाइप किया गया था ...

अद्यतन तृतीय:

मैं भी इन उदाहरणों के लिए संदर्भ खोजने हूँ:

e.originalEvent.touches[0].pageX 

event.targetTouches[0].pageY 

हालांकि मैं या तो काम करने के लिए उन पाने के लिए नहीं कर पा रहे। दोनों अपरिभाषित त्रुटियों को वापस करते हैं।

अद्यतन चतुर्थ:

ऐसा लगता है कि एक समाधान() ऑफसेट स्वयं दस्तावेज़ पर ट्रैक करना है। मैं दस्तावेज़ में एक टचेंड ईवेंट लागू कर सकता हूं, और उसके बाद ऑफसेट की जांच कर सकता हूं।

इस समस्या के साथ समस्या यह है कि मेरा टचेंड ईवेंट पहले मेरे पृष्ठ पर तत्व पर ट्रिगर करेगा और फिर यह दस्तावेज़ (बबलिंग) पर इसे आग लगा देगा। तो मैं वास्तव में यह निर्धारित नहीं कर सकता कि यह स्पर्श या स्वाइप था इससे पहले कि मुझे यह पता लगाने की ज़रूरत है कि ऑब्जेक्ट्स टचेंड इवेंट पर क्या करना है।

फिर भी यह एक विचार ...

Answer 1

ठीक त्वरित जवाब जब उंगली स्क्रीन (touchend) छोड़ देता है आप एक स्पर्श पता नहीं लगा सकता है।

मेरा पहला उदाहरण साबित करता है कि: http://jsfiddle.net/Y4fHD/

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

बाइंड touchmove घटना पर हैंडलर: http://jsfiddle.net/Y4fHD/1/

var endCoords = {}; 
$(document.body).bind("touchmove", function(event) { 
    endCoords = event.originalEvent.targetTouches[0]; 
}); 

और फिर चर endCoords का उपयोग अंतिम स्पर्श

$(document.body).bind("touchend", function(event) { 
    $('p').text("Your end coords is: x: " + endCoords.pageX + ", y: " + endCoords.pageY); 
}); 

ठीक कोशिश निर्धारण करेगा बस अपने डिवाइस का दोहन करने के लिए! फिर त्रुटि अभी भी ठीक हो जाएगी: क्यों? क्योंकि आपने अपना स्पर्श नहीं बढ़ाया है।

हम सब touchstart में तैयार endCoords चर को परिभाषित करता है तो हम देखते हैं: http://jsfiddle.net/Y4fHD/2/

var endCoords = {}; 
$(document.body).bind("touchstart touchmove", function(event) { 
    endCoords = event.originalEvent.targetTouches[0]; 
}); 

और फिर चर endCoords का उपयोग अंतिम स्पर्श निर्धारण करेगा

$(document.body).bind("touchend", function(event) { 
    $('p').text("Your end coords is: x: " + endCoords.pageX + ", y: " + endCoords.pageY); 
}); 

अब दोहन करने के लिए कोशिश अपने डिवाइस!

कुछ अंतिम नोट्स जाएगा: चर करें: startCoords और endCoords तो touchend घटना में इन का उपयोग करें: http://jsfiddle.net/Y4fHD/3/

var startCoords = {}, endCoords = {}; 
$(document.body).bind("touchstart", function(event) { 
    startCoords = endCoords = event.originalEvent.targetTouches[0]; 
}); 
$(document.body).bind("touchmove", function(event) { 
    endCoords = event.originalEvent.targetTouches[0]; 
}); 
$(document.body).bind("touchend", function(event) { 
    $('p').text("Your touch on the axis: " + Math.abs(startCoords.pageX-endCoords.pageX) + "x, " + Math.abs(startCoords.pageY-endCoords.pageY) + "y"); 
}); 

नोट:
उपरोक्त उदाहरणों में से कोई भी जांच की जाती है, यह काम करता है उम्मीद है! -5 हो जाता है 5

Answer 2

यहाँ क्या मेरे लिए काम करता है .... कोड की

$('.someClass').bind('touchmove',function(e){ 
    e.preventDefault(); 
    var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0]; 
    var elm = $(this).offset(); 
    var x = touch.pageX - elm.left; 
    var y = touch.pageY - elm.top; 
    if(x < $(this).width() && x > 0){ 
     if(y < $(this).height() && y > 0){ 
       //your code here 
     } 
    } 
}); 

Answer 3

वहाँ सरल है टुकड़ा मैं स्वाइप का पता लगाने के लिए इस्तेमाल किया कर रहा हूँ:
Math.abs मुझे एक नंबर जैसे का निरपेक्ष मान देता है .myelement के लिए इशारों, मूल में यह स्लाइडर गैलरी था

$(function() { 
    var diff, tchs, del = 150, 
    clk = function(el){ 
     if (typeof(tchs) !== 'object') return; //we have nothing to do 
     if ((diff - tchs[tchs.length - 1].pageX) < 0) { //swipe right 

     } 
     else if ((diff - tchs[tchs.length - 1].pageX) > 0) { //swipe left 

     } 
    }; 
    $('.myelement').bind('touchstart touchmove', function(ev){ 
      var oev = ev.originalEvent, el = $(this); 
      switch(ev.type.charAt(5)){ 
       case 's': //touch start 
        diff = oev.pageX; 
        window.setTimeout(clk, del, el); 
       break; 
       case 'm': //touch move 
        tchs = oev.touches; 
       break; 
      } 
    }); 
}); 

युपीडी: जिस तरह से, जब मैं MobiOne संस्करण इस्तेमाल किया द्वारा 2.0.0M2 परीक्षण केंद्र सॉफ्टवेयर यह touchend पृष्ठ X मूल्य रखा था के रूप में मैं उम्मीद थी, तो यह लग रहा है बी ० ए डी कार्यान्वयन जो भ्रमित करना आसान हो सकता है यदि आपके पास वास्तविक डिवाइस तक त्वरित पहुंच नहीं है।

UPD2: ठीक है, सकारात्मक प्रतिक्रिया से प्रेरित :) थोड़ा जटिल संस्करण एहसास हुआ, जो सही, बाएं, ऊपर और नीचे स्वाइप का पता लगाने की अनुमति देता है, फिर भी इसे साफ़ करने की आवश्यकता है, लेकिन आपको यह विचार मिल गया है।

$(function() { 
    var ftch, // first touch cache 
    lck = Math.sin(Math.PI/4); //lock value, sine of 45 deg configurable 

    var defSwipeDir = function (el, tchs) { // need define swaping direction, for better UX 
     if (typeof (tchs) !== 'object') return 0; // check if there was any movements since first touch, if no return 0 
     var ltch = tchs[tchs.length - 1], // last touch object 
      dx = ltch.pageX - ftch.pageX, 
      dy = ltch.pageY - ftch.pageY, 
      hyp = Math.sqrt(Math.pow(dx, 2) + Math.pow(dy, 2)), 
      sin = dy/hyp, 
      cos = dx/hyp, 
      dir; 

     if (Math.abs(cos) >= lck) { // left or right swape 
      dir = cos > 0 ? 'r' : 'l'; 
     } else { // up or down 
      dir = sin < 0 ? 'u' : 'd'; 
     } 
     el.trigger('swipe', dir); // trigger custom swipe event 
     return dir; // and return direction too 
    } 

    $('.myelementTouchDetection').on('touchstart touchmove swipe', function (ev, d) { 
     var oev = ev.originalEvent, 
      myelementTouchDetection = $(this), 
      dir; // you may know swipes on move event too 

     switch (ev.type) { 
      case 'touchstart': 
       ftch = oev; 
       break; 
      case 'touchmove': 
       dir = defSwipeDir(myelementTouchDetection, oev.touches); 
       return false // cancel default behaiviour 
       break; 
      case 'swipe': 
       switch (d) { 
        case 'r': // swipe right 
         console.log('swipe right'); 
         break; 
        case 'l': // swipe left 
         console.log('swipe left'); 
         break; 
        case 'u': // swipe up 
         console.log('swipe up'); 
         break; 
        case 'd': // swipe down 
         console.log('swipe down'); 
         break; 
       } 
       break; 
     } 
    }) 
}); 

Answer 4

शून्य का जवाब, ऊपर, महान मेरे लिए, सिवाय इसके कि आप touchstart बाध्य समारोह में endCoords को startCoords असाइन नहीं कर सकते काम किया। फिर वे एक ही ऑब्जेक्ट को इंगित करते हैं ताकि जब एंडकॉर्ड्स अपडेट हो जाए, तो स्टार्टकोर्ड भी शुरू होता है। जब टचेंड इवेंट आग लगती है, तो स्टार्टऑर्ड हमेशा एंडकॉर्ड्स के बराबर होंगे।

नीचे अपडेट किया गया कोड। यह आईओएस 6.0 पर सफारी का उपयोग करके आईपैड 3 पर मेरे लिए काम किया। गणित को ठीक करने और त्रुटि प्रदर्शित करने और मैथ को हटाने के लिए भी संपादित किया गया।abschend-bound फ़ंक्शन के अंदर abs()। टचमोव-बाउंड फ़ंक्शन के अंदर एक event.preventDefault() कॉल भी जोड़ा गया, ताकि ये आईओएस पर Google क्रोम पर भी काम करे।

var startCoords = {}, endCoords = {}; 

$(document.body).bind("touchstart", function(event) { 
    endCoords = event.originalEvent.targetTouches[0]; 
    startCoords.pageX = event.originalEvent.targetTouches[0].pageX; 
    startCoords.pageY = event.originalEvent.targetTouches[0].pageY; 
}); 

$(document.body).bind("touchmove", function(event) { 
    event.preventDefault(); 
    endCoords = event.originalEvent.targetTouches[0]; 
}); 

$(document.body).bind("touchend", function(event) { 
    $('p').text("Your touch on the axis: " + (endCoords.pageX-startCoords.pageX) + "x, " + (endCoords.pageY-startCoords.pageY) + "y"); 
});