純粋なJavaScriptで「タップ」イベントをキャプチャする

Question

純粋なJSでユーザの「タップ」イベントをキャプチャするにはどうすればよいですか？私は残念ながら、ライブラリを使用することはできません。

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上で見つけることができるネイティブ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 
      } 
     });