[在 JavaScript 中使用 jquery.mobile 检测滑动事件]
jquery.mobile 是一个基于 HTML5 的 UI（用户界面），用于开发响应式 Web 应用程序。
HTML 代码：
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile- 1.4.5.min.css"> <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"> </script> </head> <body> <div data-role="page" id="page_one"> <div data-role="header"> <h1>The Swipe Event</h1> </div> <div data-role="main" class="ui-content"> <p style="border:1px solid black;margin:5px; padding: 20px;"> Swipe me within the border! </p> </div> <div data-role="footer"> <h1>Footer Text</h1> </div> </div> </body> </html>
JavaScript 代码：
$(document).on("pagecreate","#page_one",function(){ $("p").on("swipeleft",function(){ alert("You swiped left!"); }); $("p").on("swiperight",function(){ alert("You swiped right!"); }); });
输出：
如你所见，如果用户在段落内但在边界内向左或向右滑动，我们会检测到 swiperight 和 swipeleft 事件。
[在 JavaScript 中使用 swipe-listener 检测滑动事件]
swipe-listener 库让网络应用程序监听滑动手势。每当调用 DOM 元素时，该库纯粹检测 swipe 事件并通过 directions 对象检查方向。
HTML 代码：
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile- 1.4.5.min.css"> <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"> </script> <script src="https://unpkg.com/swipe-listener@1.2.0/dist/swipe-listener.min.js" type="text/javascript"></script> </head> <body> <div data-role="page" id="page_one"> <div data-role="header"> <h1>The Swipe Event</h1> </div> <div data-role="main" class="ui-content"> <p style="border:1px solid black;margin:5px; padding: 20px;"> Swipe me within the border! </p> </div> <div data-role="footer"> <h1>Footer Text</h1> </div> </div> </body> </html>
JavaScript 代码：
var container = document.querySelector('p'); var listener = SwipeListener(container); container.addEventListener('swipe', function (e){ console.log(e.detail); });
输出：
在这个输出中，我们得到了许多有用的属性，例如，directions 对象，它告诉你在哪个方向上滑动。
