一: Click 事件要求mousedown与mouseups事件响应在同一个元素上,才会触发click
背景: 底部输入框获得焦点时,弹出可点击的列表,点击列表内容,赋值给输入框,并关闭弹出层
问题:
偶现点击无法给输入框赋值,但是弹出层消失的问题
定位:
- 发现外层元素有Padding,搜了一下发现有时候padding会不响应click事件,复现的时候貌似也吻合,但是其实在这里padding是响应自身事件的
- 最后发现是因为,click事件的 mousedown 触发时,输入框已经失去焦点了,而弹出层判断的是当输入框有焦点时展示,无焦点时隐藏,因此mousedown时弹出层隐藏了。。。然后再去触发mouseup,就不是在一个元素上触发的了,就不会触发click,因此测试时,时好时坏,是因为有时候手速快有时候慢,真的很诡异!
解决方案:
1.把click事件改为mousedown,确保输入框失焦时,已经触发了点击赋值事件
2.watch监听输入框的值,当输入框有值时,才去关闭弹出层
第二种方法更加合理