vue長按事件和點擊事件沖突的解決
更新時間：2022年10月24日 09:32:05 作者：冒泡的大白鯨
這篇文章主要介紹了vue長按事件和點擊事件沖突的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
長按事件和點擊事件沖突的解決
使用場景
在使用vue做移動端開發(fā)時，遇到了長按事件和點擊事件沖突的問題。
具體需求
點擊標簽時選中標簽，再次點擊時取消選擇，因標簽名稱過長，長按標簽使用tooltip顯示完整標簽名稱。
代碼說明
長按是用touchstart事件和touchend事件來實現的。在touchstart事件里使用setTimeout,時間設置為長按生效的時間就可以了，下面上代碼。
HTML部分
關于這里的.prevent修飾符，是用來阻止默認動作。但這里我試過，不加在電腦端運行時會有異常，手機端沒有影響，最好還是加上吧。
? ? <div v-for="(item, index) in List" class="flex a-center j-center" >
? ? ? ? ? ?<van-tag ? v-if="!item.selected"
? ? ? ? ? ?@touchstart.prevent="goTouch(item.name)" ?
? ? ? ? ? ?@touchend.prevent="outTouch(index)"
? ? ? ? ? ? >
? ? ? ? ? ? <span >{{ item.name }}</span>
? ? ? ? ? ? </van-tag>
? ? ? ??
? ? ? ? ? ? <van-tag v-if="item.selected" ? color="blue"?
? ? ? ? ? ? ?@touchstart.prevent="goTouch(item.name)"
? ? ? ? ? ? ?@touchend.prevent="outTouch(index)"?
? ? ? ? ? ? ?>
? ? ? ? ? ? <span>{{ item.name }}</span>
? ? ? ? ? ? </van-tag>
? ? </div>JS部分
當點擊標簽時，timer的值不為0，執(zhí)行單次點擊事件，長按一秒時將timer設置為0，則只執(zhí)行長按事件。這樣就解決了長按事件和點擊事件的沖突。
data(){
?return{
?timer:0
?}
},
methods:{
//touchstart 事件
goTouch(v) {
? ? ? this.timer = setTimeout(() => {
? ? ? ? this.timer = 0
? ? ? ? //執(zhí)行長按事件
? ? ? }, 1000);
? ? ? return false
?},
?
?//touchend事件
? ? outTouch(index) {
? ? ? clearTimeout(this.timer);
? ? ? if(this.timer!=0){
? ? ? //執(zhí)行單次點擊事件
? ? ? }
? ? ? return false
?}
}vue web端長按事件，解決和click沖突
? <div ? ? ? ? ? class="main_content" ? ? ? ? ? @mousedown="loopZoom()" ? ? ? ? ? @mouseup="clearLoopZoom()" ? ? ? ? ? @click="handlerZoom()" ? ? ? ? > ? ? ? ? ? 測試長按 ? ? ? ? </div>
? ?handlerZoom() {
? ? ? ? if (this.flag) {
? ? ? ? ? console.log('執(zhí)行click事件')
? ? ? ? }
? ? ? ? this.flag = false
? ? },
? ? loopZoom() {
? ? ? console.log("長按開始咯")
? ? ? this.firstTime = new Date().getTime()
? ? ? this.timeOut = setTimeout(() => {
? ? ? console.log("長按事件")
? ? ? }, 800);
? ? },
? ? clearLoopZoom() {
? ? ? console.log("長按結束咯")
? ? ? this.lastTime=new Date().getTime()
? ? ? if (this.lastTime - this.firstTime < 100) {
? ? ? ? ? this.flag=true
? ? ? ? }
? ? ? clearTimeout(this.timeOut);
? ? ? this.timeOut = "";
? ? ? clearInterval(this.setIntervals);
? ? ? this.setIntervals = "";
? ? },以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
一般在vue項目開發(fā)中，事件的處理邏輯一般很復雜，我們可以將處理的邏輯變成函數，在vue開發(fā)中，一般使用的是使用的是v-on指令進行事件的監(jiān)聽，事件監(jiān)聽的過程中觸發(fā)相應的JavaScript代碼2022-08-08
這篇文章主要介紹了關于axios的proxy代理配置解析，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-07-07
vue中利用simplemde實現markdown編輯器（增加圖片上傳功能）
這篇文章主要介紹了vue中利用simplemde實現markdown編輯器（增加圖片上傳功能）,本文通過實例代碼相結合的形式給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-04-04
本文主要介紹了vue+echarts5實現中國地圖的示例代碼，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-01-01
這篇文章主要介紹了詳解項目升級到vue-cli3的正確姿勢，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-01-01
這篇文章主要介紹了vant-ui組件調用Dialog彈窗異步關閉操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
在Vue3中，有多種方法可以實現組件之間的通信，本文就通過代碼示例給大家總結一些vue3實現組件通信的常用方法,需要的朋友可以參考下2023-06-06
過濾器是一個通過輸入數據，能夠及時對數據進行處理并返回一個數據結果的簡單函數。下面這篇文章主要給大家介紹了關于vue.js中過濾器使用的相關資料，需要的朋友可以參考借鑒，下面來看看詳細的介紹。2017-06-06
解決echarts vue數據更新,視圖不更新問題(echarts嵌在vue彈框中)
這篇文章主要介紹了解決echarts vue數據更新,視圖不更新問題(echarts嵌在vue彈框中)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這篇文章主要為大家詳細介紹了vue使用laydate時間插件的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-11-11