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