移動端click事件、touch事件、tap事件的區別

在移動端,有三種常見的事件類型,click事件、touch事件、tap事件。它們的區別如下:

  1. click事件:click事件是在用戶點擊屏幕的時候觸發,如果是移動設備,則會在用戶點擊屏幕的同時觸發touch事件。但是,click事件的響應時間比touch事件慢,因為click事件需要等待用戶離開屏幕后才能觸發。

  2. touch事件:touch事件是在用戶觸摸屏幕的時候觸發,可以監聽到觸摸的開始、移動、結束等狀態。但是touch事件并不能判斷用戶的手指是點擊了屏幕還是滑動了屏幕。

  3. tap事件:tap事件是在用戶點擊屏幕的時候觸發,與click事件類似,但是響應時間比click事件快。它是通過監聽touchstart和touchend事件來模擬的,可以判斷用戶的手指是點擊了屏幕還是滑動了屏幕。

下面是一個簡單的demo,可以用來驗證這三種事件的區別:

<!DOCTYPE html>
<html>
<head><title>移動端事件</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"><script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script><style>.box{width: 200px;height: 200px;background-color: #ccc;margin: auto;margin-top: 100px;text-align: center;line-height: 200px;font-size: 20px;}</style>
</head>
<body><div class="box" id="box1">click事件</div><div class="box" id="box2">touch事件</div><div class="box" id="box3">tap事件</div><script>var box1 = document.getElementById('box1');var box2 = document.getElementById('box2');var box3 = document.getElementById('box3');// click事件box1.addEventListener('click', function(){alert('click');});// touch事件box2.addEventListener('touchstart', function(){alert('touchstart');});box2.addEventListener('touchmove', function(){alert('touchmove');});box2.addEventListener('touchend', function(){alert('touchend');});// tap事件var startTime, endTime;box3.addEventListener('touchstart', function(){startTime = new Date().getTime();});box3.addEventListener('touchend', function(){endTime = new Date().getTime();if(endTime - startTime < 300){alert('tap');}});</script>
</body>
</html>

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/160557.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/160557.shtml
英文地址,請注明出處:http://en.pswp.cn/news/160557.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

【開源】基于Vue和SpringBoot的康復中心管理系統

項目編號&#xff1a; S 056 &#xff0c;文末獲取源碼。 \color{red}{項目編號&#xff1a;S056&#xff0c;文末獲取源碼。} 項目編號&#xff1a;S056&#xff0c;文末獲取源碼。 目錄 一、摘要1.1 項目介紹1.2 項目錄屏 二、功能模塊2.1 普通用戶模塊2.2 護工模塊2.3 管理員…

uni-app中vue3+setup實現下拉刷新、上拉加載更多效果

在小程序或各類app中&#xff0c;下拉刷新和上拉加載更多是極為常見和使用非常頻繁的兩個功能&#xff0c;通過對這兩個功能的合理使用可以極大的方便用戶進行操作。 合理的設計邏輯才能更容易挽留住用戶&#xff0c;因為這些細節性的小功能點就變得極為重要起來。 那么在uni…

基于WEB的停車場管理系統的設計和實現【附源碼】

基于WEB的停車場管理系統的設計和實現 摘 要 隨著現代社會的快速發展&#xff0c;人民生活水平快速提高&#xff0c;汽車的數量飛速增加&#xff0c;與此同時停車問題也越來越受到人們的關注&#xff0c;為了實現對停車場進行有效的管理&#xff0c;結合一些停車場的模式和現狀…

游戲被攻擊了怎么辦

隨著網絡技術和網絡應用的發展&#xff0c;網絡安全問題顯得越來越重要&#xff0c;在創造一個和諧共贏的互聯網生態環境的路途中總是會遇到各種各樣的問題。最常見的當屬于DDOS攻擊&#xff08;Distributed Denial of Service&#xff09;即分布式阻斷服務。由于容易實施、難以…

【LeetCode刷題】--40.組合總和II

40.組合總和II 本題詳解&#xff1a;回溯算法 class Solution {public List<List<Integer>> combinationSum2(int[] candidates, int target) {int len candidates.length;List<List<Integer>> res new ArrayList<>();if (len 0) {return re…

深度學習之基于YoloV5車輛和行人目標檢測系統

歡迎大家點贊、收藏、關注、評論啦 &#xff0c;由于篇幅有限&#xff0c;只展示了部分核心代碼。 文章目錄 一項目簡介YOLOv5 簡介YOLOv5 特點 車輛和行人目標檢測系統 二、功能三、系統四. 總結 一項目簡介 # 深度學習之基于 YOLOv5 車輛和行人目標檢測系統介紹 深度學習在…

2023 年 亞太賽 APMCM 國際大學生數學建模挑戰賽 |數學建模完整代碼+建模過程全解全析

當大家面臨著復雜的數學建模問題時&#xff0c;你是否曾經感到茫然無措&#xff1f;作為2022年美國大學生數學建模比賽的O獎得主&#xff0c;我為大家提供了一套優秀的解題思路&#xff0c;讓你輕松應對各種難題。 cs數模團隊在亞太賽 APMCM前為大家提供了許多資料的內容呀&…

【西行紀年番】孫悟空對戰陰界王,素衣奄奄一息,巨靈拳霸氣一擊

Hello,小伙伴們&#xff0c;我是拾荒君。 《西行紀年番》第20集已更新。為了救回素衣&#xff0c;孫悟空想盡辦法&#xff0c;最后他拜托沙悟凈幫忙&#xff0c;終于成功把自己傳送到陰界。原來&#xff0c;素衣的魂魄被陰界王藏在了他制造的人偶之中。沙悟凈提醒孫悟空必須在…

8.2 Windows驅動開發:內核解鎖與強刪文件

在某些時候我們的系統中會出現一些無法被正常刪除的文件&#xff0c;如果想要強制刪除則需要在驅動層面對其進行解鎖后才可刪掉&#xff0c;而所謂的解鎖其實就是釋放掉文件描述符&#xff08;句柄表&#xff09;占用&#xff0c;文件解鎖的核心原理是通過調用ObSetHandleAttri…

Axios使用方式

ajax是JQUERY封裝的XMLHttprequest用來發送http請求 Axios簡單點說它就是一個js庫,支持ajax請求,發送axios請求功能更加豐富,豐富在哪不知道 1.npm使用方式 vue項目中 npm install axios 2.cdn方式 <script src"https://unpkg.com/axios/dist/axios.min.js">…

【三維幾何學習】自制簡單的網格可視化軟件 — Mesh Visualization

自制簡單的網格可視化軟件 — Mesh Visualization 引言一、整體框架1.1 三角形網格1.2 界面管理1.3 VTK可視化界面 二、核心源碼2.1 三角形網格&#xff1a;TriMesh類2.2 界面Widget_Mesh_Manager2.3 VTK可視化2.4 main 引言 使用PyQt自制簡單的網格可視化軟件 - 視頻展示 本是…

Node.js入門指南(一)

目錄 Node.js入門 什么是Node.js Node.js的作用 Node.js安裝 Node.js編碼注意事項 Buffer(緩沖器&#xff09; 定義 使用 fs模塊 概念 文件寫入 文件讀取 文件移動與重命名 文件刪除 文件夾操作 查看資源狀態 路徑問題 path模塊 Node.js入門 什么是Node.js …

2023最新面試題

第一家 自我介紹介紹一下最近一個&#xff08;最熟悉的一個&#xff09;項目 項目幾個人在負責 項目實際在用了嗎&#xff0c;哪個平臺在用啊&#xff08;在哪里上線&#xff09; 你認為你自己做的項目里面哪個比較難做呢&#xff0c;項目里面有什么難點&#xff1f;常用的是V…

安卓隱私指示器學習筆記

最近了解到Google 在Android12上新增了權限指示器&#xff0c;可以在信號欄的右側顯示當前訪問錄音機和Camera的應用&#xff0c;點擊后可以跳轉到相應應用的權限界面&#xff0c;消費者可以控制權限的開啟和關閉。國內手機廠商最近幾年都在增加隱私看板供能&#xff0c;消費者…

java 中漢字轉拼音

需要引入的jar <!-- pinyin --><dependency><groupId>com.belerweb</groupId><artifactId>pinyin4j</artifactId><version>2.5.0</version></dependency> 實現工具類 package com.julong.util;import java.util.regex…

編程語言發展史:高級語言的興起

一、高級語言的定義 高級語言是相對于匯編語言而言的&#xff0c;它是一種更加抽象、更加易于理解和使用的計算機編程語言。高級語言的特點是語法簡單、易于學習、易于使用、可讀性強、可移植性好等。高級語言的出現極大地提高了程序員的工作效率&#xff0c;同時也使得計算機…

Qt connect()方法Qt::ConnectionType

connect() Qt&#xff0c;綁定信號和槽原型&#xff1a; static QMetaObject::Connection connect(const QObject *sender, const char *signal,const QObject *receiver, const char *member, Qt::ConnectionType Qt::AutoConnection);static QMetaObject::Connection conn…

JSP:Javabean

起初&#xff0c;JavaBean的目的是為了將可以重復使用的代碼進行打包&#xff0c;在傳統的應用中&#xff0c;JavaBean主要用于實現一些可視化界面&#xff0c;如一個窗體、按鈕、文本框等&#xff0c;這樣的JavaBean稱之可視化的JavaBean。 隨著技術的不斷發展與項目的需求&am…

防火墻部署模式 -- 鏡像流量(旁路模式)

鏡像流量&#xff08;旁路模式&#xff09; 如圖&#xff0c;與單臂路由模式不同&#xff0c;旁路模式中&#xff0c;PC的流量不會流經防火墻&#xff0c;就算防火墻宕機也不會影他們之間的數據傳輸。 鏡像的原理是交換機把被鏡像端口的流量復制一份&#xff0c;發到監聽端口&…

尋找二叉樹最近公共祖先

二叉樹為BST LCR 193. 二叉搜索樹的最近公共祖先 1.1 遞歸 利用BST的性質 p root 或者 q root ,顯然根為公共祖先p < root < q 或者 p > root > q,顯然p&#xff0c;q分別位于root的一顆子樹上&#xff0c;故根為公共祖先max{p,q} < root ,顯然 p 和q 均在…