說明

項目開發(fā)過程中,一開始并沒有考慮到誤觸導(dǎo)致的問題,后來發(fā)現(xiàn)提交按鈕在快速點擊,或誤觸快速觸發(fā)的情況下會進行兩次提交.后來我想,不然在請求的時候進行短時間內(nèi),相同請求的過濾.于是百度尋找方法,方法是找到了,可是有時候快速點擊需要切換的頁面時,會終止需要觸發(fā)的請求.那么問題來了,要如何解決?后來索性我就想到了這個辦法,感覺簡單了很多

代碼與解說

一 思路

1.通過在App.js中建立比<router-view />層級更高的全屏模塊蓋住頁面,使得在設(shè)置的時間內(nèi)除第一次外的點擊都點擊在該層上.
2.我通過addEventListener全局監(jiān)聽了click事件

二 代碼與解說

1.直接上代碼(以下......省略號為省略代碼,與此次實現(xiàn)無關(guān))
講解:以下代碼為App.js中

<template>
  <div id="app">
    <router-view />
    <div class="mask_the_only" v-show="flag"></div>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      time: "",
      flag: false
    };
  },

  methods: {
    // mask層出現(xiàn)與定時清除
    maskShow_clear(e) {
      console.log(e.path[0].className);
      // console.log(e)
      if (e.path[0].className == "mask_the_only") {
        return;
      }
      // 一旦點擊在mask層上就會被停止所以不會進入到以下代碼
      this.flag = true;
      this.time = setTimeout(() => {
        this.flag = false;
      }, 300);
      // 倒計時內(nèi)無法觸發(fā)點擊mack以外的點擊事件,也就說為事件間隔時間
    }
  },

  mounted() {
    window.addEventListener("click", this.maskShow_clear);
  },

  beforeDestroy() {
    // 清除定時器
    clearInterval(this.time);
    // 實例銷毀之前對點擊事件進行解綁
    window.removeEventListener("click", this.maskShow_clear);
  }
};
// #region--該頁面待優(yōu)化
/**
 * 一.通過監(jiān)聽全局點擊會使得不管點擊在哪里都會喚出mack層,優(yōu)化到點擊了按鈕觸發(fā)mack層
 * **(由于各組件用到的標(biāo)簽不同,不能直接去判斷是否為btn標(biāo)簽,
 * **主要為了解決防止重復(fù)請求,但是有些按鈕是不帶請求的,
 * **按鈕觸發(fā)的對話框存在請求,目前就先這么處理)
 */
// #endregion
</script>
<style lang="scss" scoped>
.mask_the_only {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999999999;
}
</style>

三 總結(jié)

1.可能這個方法看起來比較笨,但是我覺得吧,在路由中進行各種操作有時候?qū)ξ业哪芰κ且粋€極大的考驗,我還是喜歡簡單來得快的東西.
2.我沒有對mask層進行冒泡或捕獲相關(guān)的清除,如有需要,記得添加.
3.最后感謝能看到這篇文章的同學(xué)們,希望對你們有幫助.