如何使用移动设备的 jQuery 触摸事件插件？

在本文中，我们将学习如何使用完全基于 JavaScript 的 jQuery Touch Events 插件处理移动用户界面设计的各种触摸事件。这些是可与 jQuery 一起使用的附加事件，它们也与桌面应用程序和移动 Web 应用程序兼容。

请从链接下载所需的预编译文件并将其保存在您的工作文件夹中以供实施。

或者

在 HTML 网页的 head 部分使用以下链接

示例 1：以下代码演示了用户使用jQuery Touch Event插件的简单点击事件。

  

    
    
  
    
    

  

    jQuery touch events
    Touch Me!
    
        User tapped #myeventID
    
  
    
      
        /*S imple tap event */
        $('#myeventID').tap(function (e) {
            $('#response').show();
        })
    

  

输出：

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

示例 2：以下代码演示了用户使用双链函数进行的单击和双击事件，如下所示。

  

    
    
  
    
    

  

    jQuery touch events
    Touch Me!
    
        User tapped #myeventID
    
        User double tapped #myeventID!
  
    
  
        /* Double chaining of functions */
        $('#myeventID').tap(function (e) {
            console.log('User tapped #myeventID');
            $('#response').show();
        }).doubletap(function () {
            $('#doubletapMsg').show();
        })
    

  

输出：在“触摸我！”之后点击两次，显示以下输出。

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

  

    
    
  
    
    

  

    jQuery tap start and end events
  
    Touch Me!
  
    
        $("#myeventID").tapstart(function (e, touch) {
            console.log('tap started!');
        });
  
        $("#myeventID").tapend(function (e, touch) {
            console.log('tap end!');
        });  
    

  

输出：当用户点击“触摸我！” div，显示以下输出。

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

  

    
    
  
    
    

  

    jQuery swipe events
    Touch Me!
  
    
  
        $("#myeventID").swipeend(function (e, touch) {
            console.log('Swipe event end!');
        });
  
        $("#myeventID").swipe(function (e, touch) {
            console.log('Swiped by user!');
        });
    

  

输出：当用户在“Touch Me!”上滑动文本时div，显示以下输出。

插件中还有更多的触摸事件处理函数以及数据阈值和实用函数。开发人员可以根据应用程序的需要使用它们。