Enable double tap event while allowing scrolling using Jquery

Question

I have been developing mobile apps using Cordova/Phonegap and this time I had to enable a double tap on rows of one specific table. I don't want to use a plugin or another library for it as it is only for one part of the app. How do I check double tap on Javascript?

Answer 1

So I searched "How do I check for double tap in javascript?", and voila! using @mfirdaus answer in this question I solved it. But I came to another issue, I cant scroll. So I searched "How do I enable scrolling while checking for double tap?" and found the answer here very useful.

I compiled both answers to create a function that attaches a double tap event on a given element:

var tapped = false;
var isDragging = false;

function attachDoubleTap(elem, callbacks) {
    callbacks = callbacks || {};
    callbacks.onSingleTap = callbacks.onSingleTap || function() {}
    callbacks.onDoubleTap = callbacks.onDoubleTap || function() {}

    $(document)
    .on('touchstart', elem, function(e) {

        $(window).bind('touchmove', function() {
            isDragging = true;
            $(window).unbind('touchmove');
        });
    })
    .on('touchend', elem, function(e) {

        var wasDragging = isDragging;
        isDragging = false;
        $(window).unbind("touchmove");
        if (!wasDragging) { //was clicking

            //detect single or double tap
            var _this = $(this);
            if(!tapped){ //if tap is not set, set up single tap
              tapped=setTimeout(function(){
                  tapped=null
                  //insert things you want to do when single tapped
                  callbacks.onSingleTap(_this);

              },200);   //wait 300ms then run single click code
            } else {    //tapped within 300ms of last tap. double tap
              clearTimeout(tapped); //stop single tap callback
              tapped=null

              //insert things you want to do when double tapped
              callbacks.onDoubleTap(_this);

            }
        }
    })
}

$(document).ready(function() {

  attachDoubleTap('#canvas', {
    onSingleTap: function() {
      $('.msg').text('single tap');
    },
    onDoubleTap: function() {
      $('.msg').text('double tap');
    },
    onMove: function() {
      $('.msg').text('moved');
    }
  });
});




var tapped = false;
var isDragging = false;

function attachDoubleTap(elem, callbacks) {
  callbacks = callbacks || {};
  callbacks.onSingleTap = callbacks.onSingleTap || function() {}
  callbacks.onDoubleTap = callbacks.onDoubleTap || function() {}
  callbacks.onMove = callbacks.onMove || function() {}

  $(document)
    .on('touchstart', elem, function(e) {

      $(window).bind('touchmove', function() {
        isDragging = true;
        callbacks.onMove();
        $(window).unbind('touchmove');
      });
    })
    .on('touchend', elem, function(e) {

      var wasDragging = isDragging;
      isDragging = false;
      $(window).unbind("touchmove");
      if (!wasDragging) { //was clicking

        //detect single or double tap
        var _this = $(this);
        if (!tapped) { //if tap is not set, set up single tap
          tapped = setTimeout(function() {
            tapped = null
              //insert things you want to do when single tapped
            callbacks.onSingleTap(_this);

          }, 200); //wait 300ms then run single click code
        } else { //tapped within 300ms of last tap. double tap
          clearTimeout(tapped); //stop single tap callback
          tapped = null

          //insert things you want to do when double tapped
          callbacks.onDoubleTap(_this);

        }
      }
    })
}

body {
  font-family: arial;
}
#canvas {
  width: 500px;
  height: 450px;
  background-color: #b0dddf;
  border: 1px solid #ccc;
}
.msg {
  border: 1px solid #ccc;
  margin: 0 auto;
  width: 300px;
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="canvas">
  <ul>
    <li>Try to tap once</li>
    <li>Try to tap twice</li>
    <li>Try to tap and drag</li>
  </ul>

  <div class='msg'></div>

</div>

I hope this helps someone in the future. (I only included the Move() callback on the snippet to show it is working, it is up to you to add it to the function)