Vue中使用touchstart、touchmove、touchend與click沖突問題
使用touchstart、touchmove、touchend與click沖突
今天做項目,突然發(fā)現(xiàn)了這個問題。就是在移動端,一個元素既注冊有滑動事件,又注冊有點擊事件時就會出現(xiàn)一些問題。
比如我就不知道滑動事件的優(yōu)先級是大于點擊事件的,而當(dāng)我們只想執(zhí)行點擊事件而不想觸發(fā)滑動時間時,就必須做個處理
事件執(zhí)行順序
touchstart →touchmove →touchend→click
所以當(dāng)我們執(zhí)行點擊事件時,其實在執(zhí)行點擊事件之前,就已經(jīng)執(zhí)行了滑動事件了。如果滑動事件的邏輯和點擊事件的邏輯不一樣,這樣就會出現(xiàn)問題。
上網(wǎng)找了很久終于找到一個方法,就是通過活動距離來判斷,當(dāng)滑動距離大于自己設(shè)定的距離時,就執(zhí)行滑動事件,否則就不執(zhí)行。
touchstart (e) { this.startX = e.touches[0].clientX }, touchmove (e) { this.moveX = e.touches[0].clientX // 如果有滑動距離,則將isTouch設(shè)為true if (this.moveX) { this.isTouch = true } }, touchEnd () { if (this.isTouch) { if (this.startX - this.moveX < -50 && this.moveX) { // 右滑觸發(fā) this.getData() } else if (this.startX - this.moveX > 50 && this.moveX) { //左滑觸發(fā) this.getData() } } this.startX = 0 this.moveX = 0 this.isTouch = false },
這樣設(shè)置后就不會影響點擊事件了。一開始我還以為是異步問題,搞了半天原來是事件的優(yōu)先級問題。
觸摸事件(touchstart、touchmove和touchend)
觸摸事件(touch)會在用戶手指放在屏幕上面的時候、在屏幕上滑動的時候或者是從屏幕上移開的時候出發(fā)。
下面具體說明
touchstart
事件:當(dāng)手指觸摸屏幕時候觸發(fā),即使已經(jīng)有一個手指放在屏幕上也會觸發(fā)。touchmove
事件:當(dāng)手指在屏幕上滑動的時候連續(xù)地觸發(fā)。touchend
事件:當(dāng)手指從屏幕上離開的時候觸發(fā)。
除了常見的DOM屬性,觸摸事件還包含下面三個用于跟蹤觸摸的屬性。也就是存在于事件的默認(rèn)參數(shù)event中。
touches
:表示當(dāng)前跟蹤的觸摸操作的touch對象的數(shù)組。targetTouches
:特定于事件目標(biāo)的Touch對象的數(shù)組。changeTouches
:表示自上次觸摸以來發(fā)生了什么改變的Touch對象的數(shù)組。
每個Touch對象包含的屬性如下。
clientX
:觸摸目標(biāo)在視口中的x坐標(biāo)。clientY
:觸摸目標(biāo)在視口中的y坐標(biāo)。identifier
:標(biāo)識觸摸的唯一ID。pageX
:觸摸目標(biāo)在頁面中的x坐標(biāo)。pageY
:觸摸目標(biāo)在頁面中的y坐標(biāo)。screenX
:觸摸目標(biāo)在屏幕中的x坐標(biāo)。screenY
:觸摸目標(biāo)在屏幕中的y坐標(biāo)。target
:觸目的DOM節(jié)點目標(biāo)。
實際 的使用:
總結(jié)
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue使用this.$message不生效的部分原因及解決方案
這篇文章主要介紹了vue使用this.$message不生效的部分原因及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-09-09vue3結(jié)合ts從零實現(xiàn)vueuse的useRouteQuery方法
這篇文章主要為大家詳細(xì)介紹了如何使用vue3與ts從零實現(xiàn)一個類vueuse的useRouteQuery方法,并解決vueuse的useRouteQuery方法存在的一些問題,感興趣的可以了解下2024-03-03新版vue-cli模板下本地開發(fā)環(huán)境使用node服務(wù)器跨域的方法
這篇文章主要介紹了新版vue-cli模板下本地開發(fā)環(huán)境使用node服務(wù)器跨域的方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-04-04Vue3+Antd實現(xiàn)彈框顯示內(nèi)容并加入復(fù)制按鈕
這篇文章主要介紹了Vue3+Antd實現(xiàn)彈框顯示內(nèi)容并加入復(fù)制按鈕,本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2023-12-12Vue中響應(yīng)式系統(tǒng)實現(xiàn)原理圖文講解
Vue的響應(yīng)式實現(xiàn)是借助Object.defineProperty通過重寫getter和setter方法來進行的數(shù)據(jù)劫持,Vue3通過Proxy代理攔截對象中任意屬性的變化,通過Reflect反射對源對象的屬性進行操作,然后再在get里收集依賴在set里派發(fā)更新2023-03-03Vue實現(xiàn)自定義字段導(dǎo)出EXCEL的示例代碼
這篇文章主要介紹了Vue實現(xiàn)自定義字段導(dǎo)出EXCEL的示例代碼,代碼簡單易懂,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-08-08Vue實現(xiàn)數(shù)據(jù)導(dǎo)出導(dǎo)入實戰(zhàn)案例
我們經(jīng)常需要在Vue搭建的后臺管理系統(tǒng)里進行數(shù)據(jù)導(dǎo)入導(dǎo)出等操作,下面這篇文章主要給大家介紹了關(guān)于Vue實現(xiàn)數(shù)據(jù)導(dǎo)出導(dǎo)入實戰(zhàn)案例的相關(guān)資料,需要的朋友可以參考下2023-01-01詳解Vue 普通對象數(shù)據(jù)更新與 file 對象數(shù)據(jù)更新
本篇文章主要介紹了詳解Vue 普通對象數(shù)據(jù)更新與 file 對象數(shù)據(jù)更新 ,具有一定的參考價值,有興趣的可以了解一下。2017-04-04