0

为了在移动设备上实现“长按”,我从一个简单的事件映射开始,其中touchstart设置一个时间,touchend设置另一个,然后计算差异以查看元素被按下了多长时间。这是我的旧代码:

        $('html')
            .on({
                touchstart : function(e){
                    g.tt.start = new Date();
                },
                touchend : function(e){
                    g.tt.end = new Date();
                    g.tt.delta = g.tt.end - g.tt.start;
                    alert(g.tt.delta);
                    g.tt = {};
                }
            })
        ;

但不幸的是...

...每隔一段时间,就会一直计算从上一个触摸端到触摸开始的差异。我很确定我缺少一些基本的东西,因此最终过度设计了这个(恐怕没有正式的培训)。这是我的新代码:

        $('html')
            .on({
                touchstart : function(e){
                    g.tt = {};
                    g.tt.start = new Date();
                },
                touchend : function(e){
                    g.tt.end = new Date();
                    g.tt.delta = g.tt.end - g.tt.start;
                    if( isNaN(g.tt.delta) == false ) {
                        alert(g.tt.delta);
                    } 
                    else {
                        return false;
                    }
                    setTimeout(function(){g.tt = {}; });
                }
            })
        ;

难道不应该有一个更简单的方法来用更少的子句来做到这一点吗?别介意我有趣的g.tt变量名。

4

2 回答 2

1

我意识到我采取了错误的方法,并且还找到了一个不错的插件:

http://aanandprasad.com/articles/jquery-tappable/

于 2012-09-25T23:50:36.403 回答
0

您正在计时两个事件之间的差异,因此无需使用 setTimeout,只需使用闭包在两个事件之间共享一些变量即可。这个例子取自这个答案

(function () {
  var start, end;
  $('html').on({
    touchstart : function(e){
      start = +new Date(); // get unix-timestamp in milliseconds
    },
    touchend : function(e){
      end = +new Date();
      g.tt.delta = end - start;
      if( isNaN(g.tt.delta) == false ) {
        alert(g.tt.delta);
      }
    }
  });
})();

这是一个带有鼠标事件和触摸事件的演示

于 2012-09-25T22:43:31.417 回答