2010-07-06 12 views
18

हालांकि इस कोड "1" की अपेक्षित व्यवहार का उत्पादन जब स्क्रीन को छूने:क्या jQuery स्पर्श घटनाओं को संरक्षित करता है?

document.getElementById('someNodeId').addEventListener('touchmove', touch, true); 

function touch(evt) { 
    evt.preventDefault(); 
    alert(evt.changedTouches.length);  
    } 

एक ही कोड एक jQuery चयनकर्ता का उपयोग: "लेखन त्रुटि::

$('#someNodeId').bind('touchmove', touch); 

त्रुटि पैदा करता है अभिव्यक्ति का परिणाम 'evt.changedTouches' [अपरिभाषित] एक वस्तु नहीं है "।

(डिवाइस = आईपॉड टच ओएस 3.1.3 (7E18); jQuery 1.4.2)।

यह कैसे संभव है और मैं गलत क्या कर रहा हूं?

उत्तर

33

प्रयास करें

$(document).ready (function() { 
    $("#someNodeId").bind("touchmove", function (event) { 
     var e = event.originalEvent; 
     console.log(e.targetTouches[0].pageX); 
    }); 
}); 
+2

एक 'originalEvent' की आवश्यकता क्यों है, इसकी व्याख्या होगी ओपी और अन्य लोगों के लिए सहायक जो jQuery की घटना सामान्यीकरण से परिचित नहीं हैं। – Anurag

+9

दरअसल; स्पष्टीकरण यहां पाया गया है: http://stackoverflow.com/questions/671498/jquery-live-removing-iphone-touch-event-attributes "घटनाओं को ठीक करने के लिए, jQuery घटना को क्लोन करता है। ऐसा करने से, यह केवल प्रदर्शन कारणों के लिए सीमित संख्या में गुणों की प्रतिलिपि बनाता है। हालांकि, आप अभी भी ईवेंट इवेंट ऑब्जेक्ट के माध्यम से मूल ईवेंट ऑब्जेक्ट तक पहुंच सकते हैं। " असल में मुझे यकीन नहीं है कि आईफोन पर jQuery का उपयोग करना बहुत उपयोगी है; मैं jQTouch की वजह से इस मार्ग पर गया लेकिन अब मैं इससे दूर जा रहा हूं। – Bambax

4

मैं JQuery आधारित परियोजना

var pointerEventToXY = function(e){ 
    var out = {x:0, y:0}; 
    if(e.type == 'touchstart' || e.type == 'touchmove' || e.type == 'touchend' || e.type == 'touchcancel'){ 
    var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0]; 
    out.x = touch.pageX; 
    out.y = touch.pageY; 
    } else if (e.type == 'mousedown' || e.type == 'mouseup' || e.type == 'mousemove' || e.type == 'mouseover'|| e.type=='mouseout' || e.type=='mouseenter' || e.type=='mouseleave') { 
    out.x = e.pageX; 
    out.y = e.pageY; 
    } 
    return out; 
}; 

उदाहरण के लिए इस सरल समारोह का उपयोग करें:

$('a').on('mousemove touchmove', function(e){ 
    console.log(pointerEventToXY(e)); // will return obj ..kind of {x:20,y:40} 
}) 

आशा है कि यह आप के लिए उपयोगी हो जाएगा;)

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