Question

我一直在寻找一个好的jQuery库，它允许我将触摸事件附加到DOM元素，特别是轻扫/点击。

我已经尝试过hammer.js，它在文档中告诉它有滑动效果，但是当我尝试像$（'。element'）那样附加它时。（'swipe'，function（）{//做smth}）;它不起作用。

我能够通过使用'dragend'事件来模拟滑动，但不好的是，有时它会起作用，有时它不会。

更具体地说明我想要实现的目标 - 查看手机上的Twitter网站，并尝试在时间轴/ Feed中向左/向右滑动推文，它应显示“回复”/“转推”的一些操作按钮'/'最喜欢'。

任何人都可以给我一个代码示例或一个包含有关如何实现此目标的良好文档的库吗？

P.S：我不能在这个项目上使用jQuery mobile。

Answer 1

我无法帮助你使用库，但我可以复制/粘贴我用来使用JQuery进行滑动的内容。此示例仅适用于向上和向下滑动，但很容易适应其他手势。

这是插件部分：

;(function($) { 
  $.fn.tactile = function(swipe) {
    return this.each(function() {
      var $this = $(document),
      isTouching = false,
      debut;                                // means start in french

      $this.on('touchstart', debutGeste);       

      function debutGeste() {               // means start of gesture
        if (event.touches.length == 1) {
          debut = event.touches[0].pageY;
          isTouching = true;
          $this.on('touchmove', geste);
        }
      }

      function finGeste() {                 // means end of gesture
        $this.off('touchmove');
        isTouching = false;
        debut = null;
      } 

      function geste() {                   // geste means gesture
        if(isTouching) {
          var actuel = event.touches[0].pageY,
          delta = debut - actuel;

          if (Math.abs(delta) >= 30) {     // this '30' is the length of the swipe
            if (delta > 0) {
              swipe.up();
            } else {
              swipe.down();
            }                       
            finGeste();
          }
        }
        event.preventDefault(); 
      }
    });
  };
})(jQuery);

这是使用部分：

$(document).tactile({   
  up: function() { }, 
  down: function() { }
});

我不能保证这是正确的方法，这不是好的代码，但它有效。

Answer 2

你不能使用jQuery mobile？你能用Sencha touch吗？ http://dev.sencha.com/deploy/touch/examples/production/kitchensink/#demo/touchevents

Answer 3

如果你使用的是jQuery版本的Hammer.js，那不应该是：

$（'。element'）。hammer（）。on（'swipe'，function（）{// do smth}）;

我认为您需要Hammer对象来处理特定于jQuery的事件。根据我的阅读，Hammer不会将它们作为正常的自定义jQuery事件注入。

Jquery触摸滑动事件/没有jQuery移动

3 个答案: