jQuery触摸滑动事件 / 不使用jQuery移动版

Question

我已经寻找了一段时间一个好的jQuery库，可以让我附加触摸事件到DOM元素，特别是滑动/点击。

我尝试过hammer.js，在文档中它告诉我有滑动效果，但当我尝试像$('.element').on('swipe', function(){ //do smth });这样附加时，它不起作用。

我能够通过使用它的“dragend”事件模拟滑动，但坏的是有时它有效，有时它无效。

更具体地说，我想要实现什么 - 在手机上检查Twitter网站，并尝试在您的时间线/源中向左/向右滑动一条推文，它应该显示一些操作按钮，如'回复'/'转发'/'喜欢'。

有人可以给我一个代码示例或一个带有良好文档的库，告诉我如何实现这个功能吗？

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

- Stafie Anatolie

---

是的，我试过了，并且我已经尝试了大部分我找到的库，但我没有真正找到一个很好的工作的。 :( - Stafie Anatolie

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() { }
});

我不能保证这是正确的方式，也不能保证这是优秀的代码，但它可以正常工作。

- mddw

---

谢谢 mdi，我会尝试一下并让您知道结果 ;) - Stafie Anatolie

这段代码正在多个网站上运行，所以我希望它能正常工作 :) 如果您需要帮助添加左右滑动功能，请告诉我。 - mddw

我会尝试自己调整（不想太麻烦你）。非常感谢。 - Stafie Anatolie

Answer 2

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

- Ruan Mendes

---

嗨Juans，谢谢你的回答。我认为仅仅为了事件而使用像Sencha / jQuery mobile这样的框架有些过度了，不是吗？ - Stafie Anatolie

@StafieAnatolie 如果你要构建一个看起来像移动应用的应用程序，那么就不是这样了。这两个框架都可以做很多让你的应用程序看起来移动友好的事情。如果只是一个页面并且你想滑动，那么也许可以。但是看起来你想显示一个列表视图，并在滑动时显示按钮，这两个框架都可以轻松实现。 - Ruan Mendes

Answer 3

如果您正在使用 Hammer.js 的 jQuery 版本，那么应该是这样的：

$('.element').hammer().on('swipe', function(){ //do smth });

我认为您需要 Hammer 对象来处理 jQuery 特定的事件。根据我所了解的，Hammer 不会将它们注入为普通的自定义 jQuery 事件。

- JSwartzen