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