解決vue的touchStart事件及click事件沖突問題
一 、問題：
今天遇到這樣問題，給某個元素同時綁定touchStart及click事件后，若在移動設(shè)備上，當(dāng)你點(diǎn)擊時，會依次出發(fā)這兩個事件。因為移動端設(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實現(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)文章
watch 函數(shù)是 Vue.js 提供的一個強(qiáng)大工具,用于響應(yīng)數(shù)據(jù)變化并執(zhí)行相應(yīng)的回調(diào),通過合理使用 watch 函數(shù),我們可以實現(xiàn)異步數(shù)據(jù)請求、表單驗證、動態(tài)樣式等多種功能,這篇文章主要介紹了Vue.js 的 watch函數(shù),需要的朋友可以參考下2024-08-08
基于vue.js中關(guān)于下拉框的值默認(rèn)及綁定問題
今天小編就為大家分享一篇基于vue.js中關(guān)于下拉框的值默認(rèn)及綁定問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章主要為大家詳細(xì)介紹了Vue實現(xiàn)步驟條效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
vue3+ts+echarts實現(xiàn)按需引入和類型界定方式
這篇文章主要介紹了vue3+ts+echarts實現(xiàn)按需引入和類型界定方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
大家都知道vue-router有兩種模式，hash模式和history模式，帶＃的則是hash模式。接下來給大家?guī)砹薞ue 去除路徑中的＃號的解決方法，感興趣的朋友一起看看吧2018-04-04
本篇文章主要介紹了淺談vuepress 踩坑記，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-04-04
這篇文章主要介紹了vue?全選組件封裝,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-02-02
vue3.0中的雙向數(shù)據(jù)綁定方法及優(yōu)缺點(diǎn)
這篇文章主要介紹了vue3.0中的雙向數(shù)據(jù)綁定方法 ，文中通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2019-08-08
國密SM4算法是一種對稱加密算法，適用于對稱密鑰加密和解密的場景，這篇文章主要介紹了vue使用國密SM4進(jìn)行加密、解密,需要的朋友可以參考下2023-07-07
因為項目需要，近期做了一個公眾號網(wǎng)頁開發(fā)。在此期間也踩了一些坑，解決這些坑之后，準(zhǔn)備對這個項目進(jìn)行復(fù)盤。記錄下項目從開發(fā)到上線所解決的問題，并對使用vue進(jìn)行公眾號開發(fā)的步驟進(jìn)行一個總結(jié)。方便以后有問題進(jìn)行查閱。希望對你有所幫助2021-05-05