如何左滑和右滑

Question

提前道歉 - 这是一个非常基础的问题：为什么swipeleft和swiperight无法工作？

(function() {
    $('img').on('swiperight', swipeRight);
    function swipeRight(myEvent){ 
        myEvent.stopPropagation();
        alert('swipeRight');
    };

    $('img').on('swipeleft', swipeLeft);
    function swipeLeft(myEvent) { 
        myEvent.stopPropagation();
        alert('swipeLeft');
    };
})();

我已经加载了jQuery，但我是否需要加载像jQuery Mobile或Angular这样的整个库呢？我只想从一张图片滑动到另一张。

- Phillip Senn

---

我建议您看一下一些JavaScript框架，比如Hammer JS http://eightmedia.github.io/hammer.js/ - njtman

好主意。我看到hammer.js在JavaScript Weekly中被提到了。 - Phillip Senn

Answer 1

标准 jQuery 没有定义 swiperight 或 swipeleft 事件。然而，jQuery Mobile 定义了这些事件。您需要加载该库才能使用这些事件处理程序。

- Zajn

---

哦...所以我必须加载jQuery Mobile...我本来希望使用Twitter Bootstrap。 - Phillip Senn

据我所知，Bootstrap的JS仅为其包含的插件定义事件。根据他们的文档，他们也不正式支持第三方库，因此如果您同时使用Bootstrap事件+ jQuery / jQuery Mobile，则可能会出现一些冲突需要解决。 - Zajn

好的，我有一些使用jQuery Mobile的经验，所以我的答案是使用它。谢谢！ - Phillip Senn

@Phillip 我认为你不应该仅仅为了获取“swipe”事件而使用jQuery Mobile。在我看来，如果你计划开发移动应用网站，可以使用jQuery Mobile。也许你可以使用jQuery UI Touch Punch添加Swipe事件。 - Foreever

Answer 2

一个元素没有swipeleft或swiperight事件处理程序。您需要使用touchstart和touchend。因此，对于触摸，这里是所有事件处理程序：

1. touchstart
2. touchmove
3. touchend
4. touchenter
5. touchleave
6. touchcancel

通过使用jQuery ON方法和您的函数，您可以添加这些事件。

要计算向左滑动和向右滑动，您必须使用touches[0]进行计算。请阅读文章！！

这是一份资源，帮助我使用vanilla js开发触摸屏幕。 http://www.javascriptkit.com/javatutors/touchevents2.shtml

- РАВИ

---

哦，好的，谢谢！我不一定需要纯JS，但我会读这篇文章。我只需要能够从一张图片滑动到下一张。 - Phillip Senn

Jquery不支持触摸屏，你可以使用jquery mobile来实现，而且不需要太多的JavaScript代码。这里是答案：http://www.javascriptkit.com/javatutors/touchevents3.shtml - РАВИ

Answer 3

你可以使用jQuery UI Touch Punch来添加触摸滑动功能。

只需按照以下简单步骤即可轻松使用Touch Punch：

1. 在您的页面上包含jQuery和jQuery UI。

   <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
   <script src="http://code.jquery.com/ui/1.8.21/jquery-ui.min.js"></script>
   

2. 在jQuery UI之后并在第一次使用之前，引入Touch Punch。

   请注意，如果您正在使用jQuery UI的组件，则必须在jquery.ui.mouse.js之后包含Touch Punch，因为Touch Punch会修改其行为。

   <script src="jquery.ui.touch-punch.min.js"></script>
   

3. 将要滑动的对象设为可拖动。

   <script>$('.selector').draggable();</script>
   

- Foreever

---

哇！太棒了！感谢永远！喜欢这些插件！ - Phillip Senn

好的，在睡醒后，我决定去检查你的答案。 - Phillip Senn