启用双击事件，同时允许使用 Jquery 滚动

Question

我一直在使用 Cordova/Phonegap 开发移动应用程序，这次我必须在一个特定表格的行上启用双击。我不想为它使用插件或其他库，因为它仅适用于应用程序的一部分。 如何检查 Javascript 上的双击？

Answer 1

所以我搜索了“如何在 javascript 中检查双击？”，瞧！在这个question 中使用@mfirdaus 答案我解决了它。但是我遇到了另一个问题，我无法滚动。所以我搜索了“如何在检查双击时启用滚动？”并发现答案here 非常有用。

我编译了两个答案以创建一个函数，该函数在给定元素上附加双击事件：

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>

我希望这对将来的某人有所帮助。（我只在 sn-p 中包含了 Move() 回调以表明它正在工作，由您来添加它到函数)