資料結構
網路
關係資料庫管理系統 (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 次瀏覽
