शुद्ध जावास्क्रिप्ट

Question

के साथ "टैप" ईवेंट कैप्चर करें मैं शुद्ध जेएस के साथ उपयोगकर्ता के "टैप" ईवेंट को कैप्चर कैसे कर सकता हूं? दुर्भाग्यवश, मैं किसी भी पुस्तकालय का उपयोग नहीं कर सकता।

Answer 1

click ईवेंट माउस क्लिक के साथ-साथ टच क्लिक पर ट्रिगर किया गया है।

touchstart ईवेंट स्पर्श होने पर ईवेंट ट्रिगर किया जाता है।

touchend ईवेंट टच समाप्त होने पर ट्रिगर होता है। यदि डिफ़ॉल्ट कार्रवाई को रोका जाता है, तो click ईवेंट ट्रिगर नहीं होगा।

http://www.w3.org/TR/touch-events/

Answer 2

यह मेरा कोड नहीं है लेकिन मुझे याद नहीं है कि मुझे यह कहां से मिला, सफलतापूर्वक उपयोग किया गया। यह jQuery का उपयोग करता है लेकिन टैप हैंडलिंग के लिए कोई अतिरिक्त पुस्तकालय या प्लगइन्स नहीं।

$.event.special.tap = { 
    setup: function(data, namespaces) { 
     var $elem = $(this); 
     $elem.bind('touchstart', $.event.special.tap.handler) 
      .bind('touchmove', $.event.special.tap.handler) 
      .bind('touchend', $.event.special.tap.handler); 
    }, 

    teardown: function(namespaces) { 
     var $elem = $(this); 
     $elem.unbind('touchstart', $.event.special.tap.handler) 
      .unbind('touchmove', $.event.special.tap.handler) 
      .unbind('touchend', $.event.special.tap.handler); 
    }, 

    handler: function(event) { 
     event.preventDefault(); 
     var $elem = $(this); 
     $elem.data(event.type, 1); 
     if (event.type === 'touchend' && !$elem.data('touchmove')) { 
      event.type = 'tap'; 
      $.event.handle.apply(this, arguments); 
     } else if ($elem.data('touchend')) { 
      $elem.removeData('touchstart touchmove touchend'); 
     } 
    } 
}; 

$('.thumb img').bind('tap', function() { 
    //bind tap event to an img tag with the class thumb 
} 

मैं iPad के लिए विशेष रूप से एक परियोजना के लिए इस प्रयोग किया जाता है, तो डेस्कटॉप और टेबलेट के लिए एक साथ काम करने में सुधार करने की आवश्यकता हो सकती।

Answer 3

वहाँ touchstart, touchend और अन्य घटनाओं रहे हैं। आप इस तरह से उनके लिए घटना श्रोताओं जोड़ सकते हैं: देशी डोम घटनाओं आप MDN webstite पर पा सकते हैं के बारे में

var el = document.getElementById('test'); 
el.addEventListener('touchstart', touchHandler); 

में अधिक जानकारी।

Answer 4

मैंने खुद को एक छोटी लिपि लिखी। यह शुद्ध-जेएस में नहीं है, लेकिन मेरे लिए ठीक काम करता है। यह स्क्रॉलिंग पर स्क्रिप्ट को निष्पादित करने से रोकता है, जिसका अर्थ है कि स्क्रिप्ट केवल 'टैप' ईवेंट पर आग लगती है।

$(element) 
     .on('touchstart', function() { 
      $(this).data('moved', '0'); 
     }) 
     .on('touchmove', function() { 
      $(this).data('moved', '1'); 
     }) 
     .on('touchend', function() { 
      if($(this).data('moved') == 0){ 
       // HERE YOUR CODE TO EXECUTE ON TAP-EVENT 
      } 
     });