用純JavaScript捕獲「tap」事件

Question

如何用純JS捕獲用戶的「tap」事件？不幸的是，我無法使用任何庫。

Answer 1

click事件觸發鼠標點擊以及觸摸點擊。

當屏幕被觸摸時，觸發touchstart事件。

當觸摸結束時觸發touchend事件。如果阻止默認操作，則不會觸發click事件。

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

Answer 2

這不是我的代碼，但我不記得我從哪裏得到它，成功使用。它使用jQuery，但沒有額外的庫或插件來處理Tap本身。

$.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原生DOM事件

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

更多信息。

Answer 4

我自己寫了一個小小的腳本。它不是純JS，但對我來說工作得很好。 它可以防止在滾動上執行腳本，這意味着腳本只會觸發「tap」事件。

$(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 
      } 
     });