今天要給登入介面賬號輸入加個歷史賬號記錄的小功能：每次登入過後記錄下賬號，下次登入輸入賬號時，點選賬號input框，下彈出歷史賬號以供選擇。

但是發現綁在歷史賬號標籤上的點選事件不得行，感覺就像是點選事件失效了？ 或者綁不上點選事件。

　　邏輯是這樣的：

　　　　　　　　1、當賬號input框獲取焦點時，showHisAccRec 改為 true，即渲染彈出歷史賬號記錄。

　　　　　　　　2、當用戶點選某一項歷史賬號時，把這項值賦值給賬號input框。同時賬號input框會因為點選自動失去焦點，就把showHisAccRec 改為 false，即收起歷史賬號記錄。

　　很簡單。

　　這是標籤：

<input
    class="input-account"
    type="number"
    v-model="userId"
    placeholder-style="mine-placeholder"
    placeholder="賬號/手機號"
    data-key="userId"
    @input="inputChange"
    @blur="blurChange"
    @focus="focusChange"
    :class="{ error: isError }"
/>
<input type="text" name="username" style="z-index: -1; position: absolute;" />
<view class="input-accounts-records" v-if
 
="showHisAccRec">
    <!-- <template v-for="(account, index) in allAccountRecords.account">
            <text class="iar-account" @click="changeUserId(index)">{{account}}</text>
        </template> -->
<view class="iar-account" v-for="(account, index) in allAccountRecords.account" @click="changeUserId(index)" :key="index">{{ account }}</view>
</view>

　　這是函式：

blurChange(e) {
    const key = e.currentTarget.dataset.key;
    if (key === 'userId') {
        this.showHisAccRec = false;
    }
            
},
focusChange(e) {
    const key = e.currentTarget.dataset.key;
    if (key === 'userId') {
        this.showHisAccRec = true;
    }
},
changeUserId(index) {
    this.userId = this.allAccountRecords.account[index];
},

　　我以為可能的問題是：template 渲染、事件代理、層級、巢狀...，都試了試，沒用，始終點選事件沒反應，把我都整楞了！

　　這麼簡單的一個...繫結事件都搞不定了嗎？

　　因為使用的是uni-app，就有點以為又是什麼奇葩的坑，但是檢查頁面也沒有什麼奇異的地方，整個頁面沒使用啥複雜的東西，然後問了你度娘，還是沒啥結果...

　　本來最近情緒就有點低沉，還能遇到這麼個簡單的問題坑我，真的是有點難受，TMD啊！...

......

　　然後找到問題了：不應該再失焦函式裡面修改showHisAccRec 狀態。

　　聚焦時showHisAccRec 改為 true ，顯示歷史記錄，沒問題，然後點選某一項記錄時，問題來了：

　　　　點選的一瞬間，本來期望它先觸發changeUserId函式，然後賬號input框會因為點選自動失去焦點，然後呼叫blurChange 函式 把showHisAccRec 改為false。

　　事實是：

　　　　點選的一瞬間，賬號input框就因為點選自動失去焦點，然後呼叫blurChange 函式 把showHisAccRec 改為false...

　　　　這時候視覺上好像有點選到歷史記錄，就引出了問題：點選事件沒觸發。

　　　　其實根本就沒點選到！失焦太快了，點了個寂寞。