Question

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

Answer 1

所以我搜索了＃34;如何在javascript中检查双击？＆＃34;，瞧！在question使用@mfirdaus答案我解决了它。但我来到另一个问题，我不能滚动。所以我搜索了＃34;如何在检查双击时启用滚动？＆＃34;并且发现答案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);

            }
        }
    })
}

＆＃13;

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

        }
      }
    })
}

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

我希望这可以帮助将来的某个人。（我只在代码段中包含了Move（）回调以显示它正在运行，您可以将其添加到功能）

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

1 个答案: