Jquery 触摸滑动事件/没有 jQuery mobile答案

【问题标题】：Jquery touch swipe event / no jQuery mobileJquery 触摸滑动事件/没有 jQuery mobile
【发布时间】：2012-09-14 16:25:17
【问题描述】：

我一直在寻找一个好的 jQuery 库，它允许我将触摸事件附加到 DOM 元素，尤其是滑动/点击。

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

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

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

谁能给我一个代码示例或一个库，里面有很好的文档说明我如何实现这一点？

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

【问题讨论】：

是的，我做到了，而且我已经尝试了我找到的大多数库，但我并没有真正找到一个很好用的库。 :(

标签： jquery swipe jquery-events touch-event hammer.js

【解决方案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() { }
});

我不能保证这是正确的方法，这也不是好的代码，但它可以工作。

【讨论】：

谢谢mdi，我会试一试，让你知道结果；）
这段代码在多个网站上运行，所以我希望它有效 :) 如果您需要帮助来添加右/左滑动，请告诉我。
我会尝试自己调整（不想打扰你太多）。非常感谢。

【解决方案2】：

你不能使用 jQuery 手机？可以使用煎茶触摸吗？ http://dev.sencha.com/deploy/touch/examples/production/kitchensink/#demo/touchevents

【讨论】：

您好胡安斯，感谢您的回答。我认为只为事件使用像 Sencha/jQuery mobile 这样的框架有点矫枉过正，不是吗？
@StafieAnatolie 如果您要构建一个看起来像移动应用程序的应用程序，则不是。这两个框架都会做很多你正在做的事情，让你的应用看起来对移动设备友好。如果它只是一个页面并且您想滑动，那么也许。但看起来您想显示一个列表视图，其中包含在滑动时显示的按钮，这两个框架都很容易。

【解决方案3】：

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

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

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

【讨论】：