mui点击事件失效
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了mui点击事件失效相关的知识,希望对你有一定的参考价值。
参考技术A 点击ul中的li元素,点击失效,有时只有点击li元素的左侧才生效。解决办法:mui有自带的点击事件绑定
本来是需要这样的,结果点击无响应
换成以下就可以了,$(".top-menu-list") 为本来的事件源的父级,此父级需要是一开始就存在的dom结构,而非动态添加
如果是 a 点击无效,用以下方法试试
点击事件失效? 绑不上点击事件
今天要给登录界面账号输入加个历史账号记录的小功能:每次登录过后记录下账号,下次登录输入账号时,点击账号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没关系,其实我觉得逻辑也没问题嘛!
总之!别在失焦里面修改状态就好了...
小问题一个,倒是把我逗笑了,编程问题有时候太奇葩了!
最近心态不大好,多多调整啊!加油!
以上是关于mui点击事件失效的主要内容,如果未能解决你的问题,请参考以下文章