javascript 如何向左滑动和向右滑动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21493895/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to swipeleft and swiperight
提问by Phillip Senn
Apologies in advance - this is such a fundamental question: Why are swipeleft and swiperight not working?
提前道歉 - 这是一个如此基本的问题：为什么 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');
};
})();
I've loaded jQuery, but do I need to load a entire library like jQuery Mobile or Angular? I just want to slide from 1 picture to the next.
我已经加载了 jQuery，但是我是否需要加载整个库，比如 jQuery Mobile 或 Angular？我只想从一张图片滑到下一张。
采纳答案by Foreever
You can add touch-swipe using jQuery UI Touch Punch.
您可以使用jQuery UI Touch Punch添加触摸滑动。
Using Touch Punch is as easy as 1, 2… Just follow these simple steps:
使用 Touch Punch 就像 1、2 一样简单……只需遵循以下简单步骤：
Include jQuery and jQuery UI on your page.
<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>Include Touch Punch after jQuery UI and before its first use.
Please note that if you are using jQuery UI's components, Touch Punch must be included after jquery.ui.mouse.js, as Touch Punch modifies its behavior.
<script src="jquery.ui.touch-punch.min.js"></script>Make the object you want to swipe draggable.
<script>$('.selector').draggable();</script>
在您的页面上包含 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>
回答by Zajn
Standard jQuerydoesn't define a swiperightor swipeleftevent. jQuery Mobile does, however. You'll have to load that library to utilize those event handlers.
标准 jQuery没有定义swiperight或swipeleft事件。但是，jQuery Mobile 可以。您必须加载该库才能使用这些事件处理程序。
回答by РАВИ
A element doesn't have a swipeleft or swiperight event handler. What you need to use touchstart and touchend. So for touch here are all the event handlers:
元素没有 swipeleft 或 swiperight 事件处理程序。你需要使用touchstart和touchend什么。所以对于触摸这里是所有的事件处理程序：
- touchstart
- touchmove
- touchend
- touchenter
- touchleave
- touchcancel
- 触摸启动
- 触摸移动
- 触端
- 触摸输入
- 触摸离开
- 触摸取消
With these you can add by using jquery ON method and your function.
有了这些，您可以使用 jquery ON 方法和您的函数添加。
To calculate swipe left and swipe right you have to do a caculation using touches[0]. Read the article!!
要计算向左滑动和向右滑动，您必须使用 touches[0] 进行计算。阅读文章！！
Here is a resource that helped in in developing for touch screens using vanilla js. http://www.javascriptkit.com/javatutors/touchevents2.shtml
这是一个帮助使用 vanilla js 开发触摸屏的资源。 http://www.javascriptkit.com/javatutors/touchevents2.shtml
