मैं iPad के लिए सफारी में jQuery का उपयोग करके स्पर्श की घटनाओं को कैसे पहचान सकता हूं? क्या यह संभव है?

Question

क्या jQuery का उपयोग करके iPad के Safari ब्राउज़र पर स्पर्श घटनाओं को पहचानना संभव है?

मैंने वेब अनुप्रयोग में माउसओवर और माउसओट घटनाओं का उपयोग किया। क्या iPad के सफ़ारी ब्राउज़र के लिए कोई समान घटनाएँ हैं क्योंकि MouseOut और mouseMove जैसी कोई घटनाएँ नहीं हैं?

Answer 1

कोर jQuery के स्पर्श घटनाओं के लिए कुछ खास नहीं है, लेकिन आप निम्न घटनाओं का उपयोग करके आसानी से अपना निर्माण कर सकते हैं

• touchstart
• touchmove
• touchend
• स्पर्श करके रद्द

उदाहरण के लिए, touchmove

document.addEventListener('touchmove', function(e) {
    e.preventDefault();
    var touch = e.touches[0];
    alert(touch.pageX + " - " + touch.pageY);
}, false);

यह अधिकांश WebKit आधारित ब्राउज़रों (incl। एंड्रॉइड) में काम करता है ।

यहाँ कुछ अच्छे प्रलेखन है ।

Comments

बहुत बहुत धन्यवाद डेविड, मुझे लगता है कि यह काम करेगा लेकिन क्या है e.touches [0]? क्या आप तर्क "ई" का विस्तार से वर्णन कर सकते हैं?

— अभिषेक बी।

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

— डेविड पीन

अब आप यह कैसे पता लगा सकते हैं कि किस तत्व को घटना को ट्रिगर करना है -__-

— मुहम्मद उमर

Answer 2

यदि आप jQuery 1.7 का उपयोग कर रहे हैं, तो यह इन सभी अन्य उत्तरों की तुलना में अधिक सरल है।

$('#whatever').on({ 'touchstart' : function(){ /* do something... */ } });

Comments

हां, टिमोथी, जब मैं अपना प्रोजेक्ट शुरू कर रहा था उस समय मुझे 1.7+ वर्जन का इस्तेमाल नहीं किया गया था। अब onwords पर मैं jquery 1.7+ का उपयोग कर रहा हूँ। अच्छे सुझाव और उत्तर के लिए धन्यवाद .. बहुत बहुत धन्यवाद। :)

— अभिषेक बी। ५

यह अच्छा काम करता है। मुझे एक ही काम करने के लिए क्लिक और टचस्टार्ट की आवश्यकता थी, और मुझे गैर-वस्तु वाक्यविन्यास के लिए उपयोग किया जाता है, जैसे$('#whatever').on('touchstart click', function(){ /* do something... */ });

— goodeye

जब मैं जाता हूं $('#whatever').on({ 'touchstart' : function(ev){}});, evतो टच के बारे में कोई जानकारी नहीं होती है (छूता है, टारगेट या चेंज किया जाता है)

— ऑक्टोपस

@ ओक्टोपस: आपको स्पर्श जानकारी के अंतर्गत मिलेगा ev.originalEvent।

— पीटर ब्लूमफील्ड

@edonbajrami हां, बिल्कुल। डॉक्स जांचें और "प्रत्यायोजित घटनाओं" को देखें। $ ("नए तत्वों की निगरानी के लिए # तत्व")। ("इवेंटएक्स", "# पेमेंट", फ़ंक्शन (घटना) {/ * जो भी * /});

— Honk31

Answer 3

सबसे सरल तरीका है Hammer.js जैसी मल्टीटच जावास्क्रिप्ट लाइब्रेरी का उपयोग करना । फिर आप जैसे कोड लिख सकते हैं:

canvas
    .hammer({prevent_default: true})
    .bind('doubletap', function(e) { // And double click
        // Zoom-in
    })
    .bind('dragstart', function(e) { // And mousedown
        // Get ready to drag
    })
    .bind('drag', function(e) { // And mousemove when mousedown
        // Pan the image
    })
    .bind('dragend', function(e) { // And mouseup
        // Finish the drag
    });

और आप चलते रह सकते हैं। यह टैप, डबल टैप, स्वाइप, होल्ड, ट्रांसफॉर्म (यानी, पिंच) और ड्रैग को सपोर्ट करता है। जब समान माउस क्रियाएं होती हैं तो स्पर्श की घटनाओं में भी आग लगती है, इसलिए आपको इवेंट हैंडलर के दो सेट लिखने की आवश्यकता नहीं है। ओह, और आपको jQuery प्लगइन की आवश्यकता है यदि आप jQueryish तरीके से लिखने में सक्षम होना चाहते हैं जैसा मैंने किया था।

Comments

"सरलतम" समाधान में पुस्तकालयों को जोड़कर किसी समस्या को और अधिक जटिल बनाना शामिल नहीं है

— ऑक्टोपस

@ ऑक्टोपस सबसे आसान उपाय हैमर.जेएस का उपयोग करना जो एब्सट्रैक्ट को क्रॉस-ब्राउज़र सिरदर्द से दूर करता है। अपने परिचित क्षेत्र में होने के लिए jQuery एक्सटेंशन का उपयोग करें। मुझे बहुत जटिल नहीं लगता।

— त्रुष्कर

माना जाता है कि "सबसे सरल" समाधान अक्सर वह होता है जो लोग सबसे अधिक पेंच करते हैं ... आप जो भी करते हैं, यह सुनिश्चित करना न भूलें कि आपका समाधान उन उपकरणों पर काम करता है जो स्पर्श और माउस दोनों का समर्थन करते हैं, जैसे कि Microsoft सरफेस

— Simon_Weaver

@ ऑक्टोपस: "जब आपके पास एक हथौड़ा है [sic] ... सब कुछ एक नाखून की तरह दिखता है" :)

— चला गया

यह हथौड़ा समय है! इस पुस्तकालय को साझा करने के लिए धन्यवाद, मेरे आवेदन को स्थापित करना और चलाना आसान था! सेटअप करने के लिए एक दूसरा लिया क्योंकि ईवेंट हैंडलर अलग है, लेकिन एक साधारण कंसोल.लॉग (ईवेंट) आपको बताता है कि आपको क्या चाहिए। धन्यवाद!

— एंडी

Answer 4

टचस्टार्ट या अकेले टचडाउन का उपयोग करना एक अच्छा समाधान नहीं है, क्योंकि यदि आप पृष्ठ को स्क्रॉल करते हैं, तो डिवाइस इसे टच या टैप के रूप में भी पता लगाता है। इसलिए, एक ही समय में एक टैप और क्लिक इवेंट का पता लगाने का सबसे अच्छा तरीका सिर्फ उन टच इवेंट्स का पता लगाना है जो स्क्रीन (स्क्रॉलिंग) को नहीं बढ़ा रहे हैं। तो ऐसा करने के लिए, बस इस कोड को अपने आवेदन में जोड़ें:

$(document).on('touchstart', function() {
    detectTap = true; // Detects all touch events
});
$(document).on('touchmove', function() {
    detectTap = false; // Excludes the scroll events from touch events
});
$(document).on('click touchend', function(event) {
    if (event.type == "click") detectTap = true; // Detects click events
       if (detectTap){
          // Here you can write the function or codes you want to execute on tap

       }
 });

मैंने इसका परीक्षण किया और यह मेरे लिए iPad और iPhone पर ठीक काम करता है। यह टैप का पता लगाता है और टैप और टच स्क्रॉल को आसानी से भेद सकता है।

Comments

यह समाधान मुझे मिला सबसे आगे सीधे लगता है और iOS पर बहुत अच्छा काम करता है।

— जोशुआ लॉरेंस ऑस्टिल

मैंने पहले jquery मोबाइल का उपयोग किया था, लेकिन फिर इसने अन्य कार्यात्मकताओं में हस्तक्षेप किया। मैं अब इसका इस्तेमाल कर रहा हूं और सही काम करता हूं। अब तक कोई मुद्दा नहीं।

— अनुराग प्रियदर्शी

Answer 5

आप कई घटनाओं को पकड़ने के लिए .on () का उपयोग कर सकते हैं और फिर स्क्रीन पर स्पर्श के लिए परीक्षण कर सकते हैं, जैसे:

$('#selector')
.on('touchstart mousedown', function(e){
  e.preventDefault();
  var touch = e.touches[0];
  if(touch){
    // Do some stuff
  }
  else {
    // Do some other stuff
  }
});

Comments

सिवाय इसके कि .bindपदावनत किया जाता है। आप का उपयोग करना चाहिए.on

— jcuenod

Answer 6

jQuery Core के पास कुछ विशेष नहीं है, लेकिन आप jQuery के मोबाइल ईवेंट पर पढ़ सकते हैं पेज पर विभिन्न स्पर्श घटनाओं के बारे में , जो कि iOS डिवाइसों के अलावा अन्य पर भी काम करते हैं।

वो हैं:

• नल टोटी
• taphold
• कड़ी चोट
• बायें सरकाओ
• क्रेडिट कार्ड आदि को इलैक्ट्रॉनिक रीडर से सही से गुजारना

सूचना यह भी है कि, स्क्रॉल इवेंट (मोबाइल उपकरणों पर आधारित) के दौरान iOS डिवाइस स्क्रॉल करते समय DOM मैनिपुलेशन को जमा देता है।

Comments

मेरे प्रश्न के लिए अपना महत्वपूर्ण समय देने के लिए धन्यवाद। मैं Jquery मोबाइल घटनाओं में देख रहा हूँ .. धन्यवाद।

— अभिषेक बी।

उन घटनाओं को वास्तव में वास्तविक स्पर्श बातचीत के प्रतिनिधि नहीं हैं।

— त्रुष्कर

क्या jQuery Core एक वास्तविक उचित संज्ञा है?

— पीटर मोर्टेंसन

Answer 7

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

<script>

function doTouch(e) {
    e.preventDefault();
    var touch = e.touches[0];

    document.getElementById("xtext").innerHTML = touch.pageX;
    document.getElementById("ytext").innerHTML = touch.pageY;   
}

document.addEventListener('touchstart', function(e) {doTouch(e);}, false);
document.addEventListener('touchmove', function(e) {doTouch(e);}, false);

</script>

X: <div id="xtext">0</div>
Y: <div id="ytext">0</div>

Comments

अंतिम घटना के बाद कितना समय बीत गया, इसका पता लगाने के लिए मैंने इसे भी जोड़ा है ..document.getElementById("ttime").innerHTML = ((new Date()) - touchTime); touchTime = new Date();

— हमन्ज

Answer 8

मैंने अभी बेन्जोर के गीथहब jQuery टच इवेंट्स प्लगइन का परीक्षण किया था जो कि jQuery के 1.4 और 1.7+ दोनों संस्करणों के लिए था। यह बहुत हल्का है और दोनों के साथ पूरी तरह से काम करता है onऔर bindजबकि स्पर्श घटनाओं की एक विस्तृत सेट के लिए समर्थन प्रदान करते हैं।