解決vue的touchStart事件及click事件衝突問題
阿新 • • 發佈:2020-07-22
一 、問題:
今天遇到這樣問題,給某個元素同時繫結touchStart及click事件後,若在移動裝置上,當你點選時,會依次出發這兩個事件。因為移動端裝置上的click事件觸發是會延遲300ms,所以touchStart事件會先觸發後再觸發click事件。這樣導致每次都要執行兩次,這樣毫無意義。這裡提醒下,PC是無法識別touch相關事件
二、解決方式
(1)preventDefault方法
通過使用preventDefault方法(阻止元素預設事件行為的發生)來解決。在touchstart中新增 e.preventDefault()就可以阻止click事件觸發。
模板
<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實現,但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事件執行一次') this.$emit('change',e.target.innerText) },handleTouchStart (e) { console.log('TouchStart執行一次') e.preventDefault()//新增阻止click事件觸發 this.touchStatus = true } } }
未新增 e.preventDefault()前列印結果
新增 e.preventDefault()後列印結果
(2)判斷瀏覽器是否支援觸屏事件
通過"ontouchend" in document來判斷瀏覽器是否支援觸屏事件,若支援呼叫touch事件,不支援呼叫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事件執行一次') this.$emit('change',handleTouchStart (e) { console.log('TouchStart執行一次') 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事件衝突問題就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支援我們。