在 JavaScript 中检测手指滑动事件

原创已于 2023-07-18 08:28:38 修改

· 309 阅读

1 ·

版权

文章标签：

#javascript #开发语言

于 2023-07-18 08:28:14 首次发布

JavaScript 专栏收录该内容

23 篇文章

订阅专栏

[在 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!");
    });
});

输出：

使用 jquery.mobile 检测 JavaScript 中的滑动事件

如你所见，如果用户在段落内但在边界内向左或向右滑动，我们会检测到 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);
});