数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化学
生物
数学
英语
经济学
心理学
社会学
时尚研究
法学研究如何在移动设备上使用 jQuery touch 事件插件？
JavaScript 和 jQuery 包含各种插件，每个插件都包含一些函数。JavaScript 插件充当库，我们可以直接在代码中使用其代码。
jQuery touch 事件插件也是一个库，用于检测移动设备中的触摸事件，并在发生触摸事件时执行某些函数。使用 CDN，我们可以将 jQuery touch 事件插件添加到 HTML 中。如果用户使用 Node 应用程序，则应在项目目录中执行以下命令，以将 jQuery touch 事件插件添加到应用程序中。
npm i jquery-touch-events
在这里，我们将学习通过不同的示例使用不同的 JQuery touch 事件插件方法。
语法
用户可以按照以下语法使用 JQuery touch 事件插件的方法。
$('Selector').tap( () => {
$('#display').show();
})
在上面的语法中，“selector” 是一个 CSS 选择器，用于选择要添加特定事件的元素。这里，我们添加了 tap() 方法。
示例
在下面的示例中，我们使用了 JQuery touch 事件插件的 tap() 方法。我们将 Jquery 和 JQuery touch 事件的 CDN 添加到了 <head> 标签中。
在 HTML 中，我们创建了 id 等于“tap”的 <p> 标签。在 JQuery 中，我们访问了 id 等于“tap”的元素，并将其作为引用添加了 tap() 事件。
我们将回调函数作为 tap() 方法的参数添加。当用户点击文本时，它会更改 id 等于“display”的 div 的显示。
<html>
<head>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"> </script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery-touch-events/1.0.5/jquery.mobile-events.js"> </script>
</head>
<body>
<h3>Using the <i> tap() method of JQuery touch events plugin </i> to detect tap event</h3>
<p id = "tap"> Click Me! </p>
<p id = "display" style = "display:none">
You tapped the above text!
</p>
<script>
$('#tap').tap(function (e) {
$('#display').show();
})
</script>
</body>
</html>
示例
在下面的示例中，我们使用了 JQuery touch 事件插件的 swipe() 方法，以在特定的 div 上添加 swipe 事件。当用户在文本上滑动时，它会显示 id 等于“display”的 div。
<html>
<head>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"> </script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery-touch-events/1.0.5/jquery.mobile-events.js"> </script>
</head>
<body>
<h3>Using the <i> swipe() method of JQuery touch events plugin </i> to detect the swipe event</h3>
<p id = "tap"> Swipe Me! </p>
<p id = "display" style = "display:none">
You swiped the above text!
</p>
<script>
$('#tap').swipe(function (e) {
$('#display').show();
})
</script>
</body>
</html>
示例
在下面的示例中，我们使用 JQuery touch 事件插件的 doubletap() 方法将双击事件添加到代码中。
双击输出中的“双击”文本以查看结果。
<html>
<head>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<script src = " https://cdnjs.cloudflare.com/ajax/libs/jquery-touch-events/1.0.5/jquery.mobile-events.js"> </script>
</head>
<body>
<h3>Using the <i> doubletap() method of JQuery touch events plugin </i> to detect the double tap event</h3>
<button id = "btn"> Double tap </button>
<p id ="display" style = "display:none">
You double tapped the above button!
</p>
<script>
$('#btn').doubletap(() => {
$('#display').show();
})
</script>
</body>
</html>
示例
在下面的示例中，我们使用了 touchstart() 和 touchend() 方法来检测用户何时开始点击和结束点击。我们使用方法链将两个触摸事件添加到单个 HTML 元素。
<html>
<head>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"> </script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery-touch-events/1.0.5/jquery.mobile-events.js"> </script>
</head>
<body>
<h3>Using the <i> different methods of jQuery touch events plugin </i> to create a method chaining for the touch event </h3>
<button id = "btn"> Tap Here </button>
<div id = "output"> </div>
<script>
let output = document.getElementById('output');
$('#btn').tapstart(() => {
output.innerHTML += "Tap started on the button! <br>";
}).tapend(() => {
output.innerHTML += "Tap ended on the button! <br>";
})
</script>
</body>
</html>
示例
在下面的示例中，我们使用了 scrollstart() 和 scrollend() 方法分别检测滚动开始和滚动结束事件。用户可以滚动 div 并观察到，当用户开始滚动和结束滚动事件时，它会打印消息。
<html>
<head>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"> </script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery-touch-events/1.0.5/jquery.mobile-events.js"> </script>
<style>
.element {
width: 500px;
height: 200px;
overflow: scroll;
font-size: 5rem;
}
</style>
</head>
<body>
<h3>Using the <i> scrollstart() and scrollend() methods </i> to detect the scroll events</h3>
<div class = "element"> Hello world! This is a sample div. </div>
<div id = "output"> </div>
<script>
let output = document.getElementById('output');
$('.element').scrollstart(() => {
output.innerHTML += "Tap started on the button! <br>";
}).scrollend(() => {
output.innerHTML += "Tap ended on the button! <br>";
})
</script>
</body>
</html>
在本教程中，用户学习了如何使用 JQuery touch 事件插件的各种方法。用户需要使用 CSS 选择器访问 HTML 元素，并以元素为参考执行任何方法来添加事件。
795 次浏览
