如何使用手机的jQuery触摸事件插件

在这篇文章中，我们将学习如何使用完全基于JavaScript的jQuery触摸事件插件来处理移动用户界面设计的各种触摸事件。这些都是可以使用jQuery的额外事件，这些事件也兼容于桌面应用程序和移动Web应用程序。

请从链接中下载所需的预编译文件，并将其保存在你的工作文件夹中以便执行。

或者，

在你的HTML网页的标题部分使用以下链接

<script src=”https://cdnjs.cloudflare.com/ajax/libs/jquery-touch-events/1.0.5/jquery.mobile-
events.js”></script>

例子1：下面的代码演示了用户使用jQuery触摸事件插件的简单点击事件。

<!DOCTYPE html>
<html>
  
<head>
    <script type="text/javascript" src=
"http://code.jquery.com/jquery-1.11.1.min.js">
    </script>
  
    <script src="jquery.mobile-events.min.js">
    </script>
</head>
  
<body>
    <h2>jQuery touch events</h2>
    <p id="myeventID">Touch Me!</p>
    <p id="response" style="display:none">
        User tapped #myeventID
    </p>
  
    <script type="text/javascript">
      
        /*S imple tap event */
        ('#myeventID').tap(function (e) {
            ('#response').show();
        })
    </script>
</body>
  
</html>

输出:

在触摸事件之前。
触摸事件后。在 “触摸我！”被点击一次后，将显示以下输出。

例子2：下面的代码演示了用户使用双链函数的单点和双点事件，如下所示。

<!DOCTYPE html>
<html>
  
<head>
    <script type="text/javascript" src=
"http://code.jquery.com/jquery-1.11.1.min.js">
    </script>
  
    <script src="jquery.mobile-events.min.js">
    </script>
</head>
  
<body>
    <h2>jQuery touch events</h2>
    <p id="myeventID">Touch Me!</p>
    <p id="response" style="display:none">
        User tapped #myeventID</p>
    <p id="doubletapMsg" style="display:none">
        User double tapped #myeventID!</p>
  
    <script type="text/javascript">
  
        /* Double chaining of functions */
        ('#myeventID').tap(function (e) {
            console.log('User tapped #myeventID');
            ('#response').show();
        }).doubletap(function () {
            $('#doubletapMsg').show();
        })
    </script>
</body>
  
</html>

输出：在 “触摸我！”被点击两次后，显示以下输出。
如何使用手机的jQuery触摸事件插件？

例子3：下面的代码演示了用户点击HTML控件时的点击开始和点击结束触摸事件。

<!DOCTYPE html>
<html>
  
<head>
    <script type="text/javascript" src=
"http://code.jquery.com/jquery-1.11.1.min.js">
    </script>
  
    <script src="jquery.mobile-events.min.js">
    </script>
</head>
  
<body>
    <h2>jQuery tap start and end events</h2>
  
    <p id="myeventID">Touch Me!</p>
  
    <script type="text/javascript">
        ("#myeventID").tapstart(function (e, touch) {
            console.log('tap started!');
        });
  
        ("#myeventID").tapend(function (e, touch) {
            console.log('tap end!');
        });  
    </script>
</body>
  
</html>

输出：当用户点击 “Touch Me!”div时，会显示以下输出。
如何使用手机的jQuery触摸事件插件？

示例4：下面的代码演示了用户在HTML控件上滑动时的刷卡事件和刷卡结束事件。

<!DOCTYPE html>
<html>
  
<head>
    <script type="text/javascript" src=
"http://code.jquery.com/jquery-1.11.1.min.js">
    </script>
  
    <script src="jquery.mobile-events.min.js">
    </script>
</head>
  
<body>
    <h2>jQuery swipe events</h2>
    <p id="myeventID">Touch Me!</p>
  
    <script type="text/javascript">
  
        ("#myeventID").swipeend(function (e, touch) {
            console.log('Swipe event end!');
        });
  
        ("#myeventID").swipe(function (e, touch) {
            console.log('Swiped by user!');
        });
    </script>
</body>
  
</html>