记一个click事件不响应的bug+css: object-fit- 每日记 20231220

225 阅读1分钟

一: Click 事件要求mousedown与mouseups事件响应在同一个元素上,才会触发click

背景: 底部输入框获得焦点时,弹出可点击的列表,点击列表内容,赋值给输入框,并关闭弹出层

image.png

问题:

偶现点击无法给输入框赋值,但是弹出层消失的问题

定位:

  1. 发现外层元素有Padding,搜了一下发现有时候padding会不响应click事件,复现的时候貌似也吻合,但是其实在这里padding是响应自身事件的
  2. 最后发现是因为,click事件的 mousedown 触发时,输入框已经失去焦点了,而弹出层判断的是当输入框有焦点时展示,无焦点时隐藏,因此mousedown时弹出层隐藏了。。。然后再去触发mouseup,就不是在一个元素上触发的了,就不会触发click,因此测试时,时好时坏,是因为有时候手速快有时候慢,真的很诡异!

解决方案:

1.把click事件改为mousedown,确保输入框失焦时,已经触发了点击赋值事件
2.watch监听输入框的值,当输入框有值时,才去关闭弹出层
第二种方法更加合理

二: object-fit 可以做到让可替换元素,以某种方式,自适应外层容器的宽高

image.png