解決vue的touchStart事件及click事件沖突問題
一 、問題：
今天遇到這樣問題，給某個元素同時綁定touchStart及click事件后，若在移動設(shè)備上，當(dāng)你點(diǎn)擊時，會依次出發(fā)這兩個事件。因?yàn)橐苿佣嗽O(shè)備上的click事件觸發(fā)是會延遲300ms，所以touchStart事件會先觸發(fā)后再觸發(fā)click事件。這樣導(dǎo)致每次都要執(zhí)行兩次，這樣毫無意義。這里提醒下，PC是無法識別touch相關(guān)事件
二、解決方式
（1）preventDefault方法
通過使用preventDefault方法（阻止元素默認(rèn)事件行為的發(fā)生）來解決。在touchstart中添加 e.preventDefault()就可以阻止click事件觸發(fā)。
模板
<ul class="list">
<li class="item" v-for="item of letters"
:key="item"
:ref="item"
@touchstart="handleTouchStart"
@click="handleleterClick"
>{{item}}</li>
</ul>
上面模板可以使用vue事件修飾符@touchstart.stop.prevent實(shí)現(xiàn)，但method中的handleTouchStart 就無需添加 e.preventDefault()；
<ul class="list">
<li class="item" v-for="item of letters"
:key="item"
:ref="item"
@touchstart.stop.prevent="handleTouchStart"
@click="handleleterClick"
>{{item}}</li>
</ul>
methods: {
handleleterClick (e) {
console.log('click事件執(zhí)行一次')
this.$emit('change', e.target.innerText)
},
handleTouchStart (e) {
console.log('TouchStart執(zhí)行一次')
e.preventDefault()//添加阻止click事件觸發(fā)
this.touchStatus = true
}
}
}
未添加 e.preventDefault()前打印結(jié)果
添加 e.preventDefault()后打印結(jié)果
（2）判斷瀏覽器是否支持觸屏事件
通過"ontouchend" in document來判斷瀏覽器是否支持觸屏事件，若支持調(diào)用touch事件，不支持調(diào)用click事件。
<ul class="list">
<li class="item" v-for="item of letters"
:key="item"
:ref="item"
@click="handleSelfClick"
>{{item}}</li>
</ul>
methods: {
handleleterClick (e) {
console.log('click事件執(zhí)行一次')
this.$emit('change', e.target.innerText)
},
handleTouchStart (e) {
console.log('TouchStart執(zhí)行一次')
this.touchStatus = true
},
handleSelfClick (e) {
console.log('ontouchstart' in document)//打印是否支持touch事件。
if ('ontouchstart' in document) {
this.handleTouchStart(e)
} else {
this.handleleterClick(e)
}
}
}
以上這篇解決vue的touchStart事件及click事件沖突問題就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
<keep-alive> 是一個抽象組件,用于將其內(nèi)部的組件保留在內(nèi)存中,而不會重新渲染,這意味著當(dāng)組件在<keep-alive> 內(nèi)部切換時,其狀態(tài)將被保留,而不是被銷毀和重新創(chuàng)建,這篇文章主要介紹了Vue中的keep-alive緩存組件的理解,需要的朋友可以參考下2024-01-01
Vue項(xiàng)目中使用fontawesome圖標(biāo)庫的方法
fontawesome的圖標(biāo)有免費(fèi)版和專業(yè)版,本文主要使用free版本,一般free版本的圖標(biāo)夠用,free圖標(biāo)又劃分為三個圖標(biāo)庫,主要有實(shí)心圖標(biāo)solid、常規(guī)圖標(biāo)regular及品牌圖標(biāo)brand,根據(jù)需求去下載對應(yīng)的圖標(biāo)庫,無須全部下載,對vue?fontawesome圖標(biāo)庫相關(guān)知識感興趣的朋友一起看看吧2023-12-12
vue watch深度監(jiān)聽對象實(shí)現(xiàn)數(shù)據(jù)聯(lián)動效果
這篇文章主要介紹了vue watch深度監(jiān)聽對象實(shí)現(xiàn)數(shù)據(jù)聯(lián)動的方法，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2018-08-08
Vue如何通過Vue.prototype定義原型屬性實(shí)現(xiàn)全局變量
在Vue.js開發(fā)中,通過原型屬性為Vue實(shí)例添加全局變量是一種常見做法,使用$前綴命名,可以避免與組件內(nèi)部的數(shù)據(jù)、方法或計(jì)算屬性產(chǎn)生命名沖突,這種方式簡單有效,確保了變量在所有Vue實(shí)例中的可用性,同時保持全局作用域的整潔2024-10-10
Vue腳手架配置代理服務(wù)器的兩種方式(小結(jié))
本文主要介紹了Vue腳手架配置代理服務(wù)器的兩種方式(小結(jié))，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-01-01
這篇文章主要介紹了vue npm install 安裝某個指定的版本操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
vue對象或者數(shù)組中數(shù)據(jù)變化但是視圖沒有更新問題及解決
這篇文章主要介紹了vue對象或者數(shù)組中數(shù)據(jù)變化但是視圖沒有更新問題及解決,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
vue項(xiàng)目實(shí)現(xiàn)對某個區(qū)域繪制水印
這篇文章主要為大家詳細(xì)介紹了vue項(xiàng)目實(shí)現(xiàn)對某個區(qū)域繪制水印，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
vue3?實(shí)現(xiàn)關(guān)于?el-table?表格組件的封裝及調(diào)用方法
這篇文章主要介紹了vue3?實(shí)現(xiàn)關(guān)于?el-table?表格組件的封裝及調(diào)用方法,本文給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-06-06
vite+vue3中require?is?not?defined問題及解決
這篇文章主要介紹了vite+vue3中require?is?not?defined問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05