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这样的整个库？我只是想从1张图片滑到下一张图片。

Answer 1

Standard jQuery未定义swiperight或swipeleft事件。但是，jQuery Mobile does。您必须加载该库才能使用这些事件处理程序。

Answer 2

元素没有swipeleft或swiperight事件处理程序。你需要使用touchstart和touchend。所以触摸这里是所有的事件处理程序：

touchstart
touchmove
touchend
TouchEnter在
touchleave
touchcancel

使用这些可以使用jquery ON方法和您的函数添加。

要计算向左滑动并向右滑动，您必须使用触摸[0]进行计算。阅读文章!!

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

Answer 3

您可以使用jQuery UI Touch Punch添加触摸功能。

使用Touch Punch就像1,2一样简单...... 只需按照以下简单步骤操作：

在您的页面上包含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>

在jQuery UI之后及首次使用之前包含Touch Punch。

请注意，如果您使用的是jQuery UI的组件，则必须在jquery.ui.mouse.js之后包含Touch Punch，因为Touch Punch会修改其行为。
```
<script src="jquery.ui.touch-punch.min.js"></script>
```

使您要滑动的对象可拖动。

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

如何swipeleft和swiperight

3 个答案: