码迷,mamicode.com
首页 > 其他好文 > 详细

点击事件失效? 绑不上点击事件

时间:2020-10-24 09:50:22      阅读:21      评论:0      收藏:0      [点我收藏+]

标签:没反应   dataset   关系   ase   ror   一个   data   his   put   

  今天要给登录界面账号输入加个历史账号记录的小功能:每次登录过后记录下账号,下次登录输入账号时,点击账号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...

    这时候视觉上好像有点击到历史记录,就引出了问题:点击事件没触发。

    其实根本就没点击到!失焦太快了,点了个寂寞。

 

  ????????????...

  不是uni-app的问题,也和vue没关系,其实我觉得逻辑也没问题嘛!

  总之!别在失焦里面修改状态就好了...

 

 

  小问题一个,倒是把我逗笑了,编程问题有时候太奇葩了!

  最近心态不大好,多多调整啊!加油!

点击事件失效? 绑不上点击事件

标签:没反应   dataset   关系   ase   ror   一个   data   his   put   

原文地址:https://www.cnblogs.com/jiayouba/p/13863495.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有
迷上了代码!