前端开发遇到问题整理

1、失焦与点击事件冲突问题解决：

点击事件元素上加个鼠标按下事件处理阻止默认事件之行即可，因为鼠标按下事件的优先级高于失焦与点击事件

2、谷歌浏览器输入框默认填充问题解决：

谷歌浏览器保存帐号密码后，进入后续页面有输入框+密码框时会自动填充 可通过autocomplete="new-password"属性解决。但是密码框上发输入框仍会有默认填充颜色出现。可能是版本问题，现在在密码框上加一个隐藏的输入框已解决不了此问题。写个真实的输入框并宽高间距全部设置为0时方可解决。

3、页面中动态添加html并绑定点击事件时，点击事件无效。

因为我们这个html标签是编译后添加的。这时点击事件去找编译后叫这个名称的方法的事件是找不到的。所以这时操作html标签上的点击事件去找这个方法，必然是找不到的，找到的只能是后面写在window.function的全局方法。
，而这个methods中点击事件我们是在编译之前就写好的。所以可以通过window.xx = this.xx 将方法赋值给window即可解决。

动态创建html并绑定事件传参报错。

由于动态创建的html传的参数使用的是表格中初始化的对象参数，报错提示不允许在过程中修改属性。在初始化时直接重新定义一个字段存取需要设置的数据，然后传参不能是对象，需要JSON.stringify处理一下，再者将双引号替换成单引号更直观。

4、pdf.js插件展示pdf时在谷歌浏览器显示会有问题

换成jquery.media.js即可

5、历史栈问题

返回流程由于拿不到当前页历史栈的前后数据，对于用户手动返回后的页面进行路由处理存在路由数据记录不清的问题。与同事沟通重新设计方案，继承处理vueRouter的push方法并用一个数组记录历史数据，监听popstate同时处理数组中的数据。根据数组中的数据处理复杂的页面返回

6、微信中location.replace无效导致历史记录还在 进而影响页面点击返回回不去

通过sessionStorage塞个标识，前端手动返回，但是对于其他业务不是通过按钮而是根据登录态直接跳转过来的，会导致返回时停留在一个空白页面。和测试沟通为了不产生别的问题。暂时不进行优化，后续看产品要求进行处理。

7、小程序调用学生认证相册时闪退

小程序微信商城小程序内学生认证选择照片试URL会刷新,导致照片选择失败.这是由于商城侧小程序webview实在onshow时打开,选择完照片会导致onshow重新触发,进而刷新页面。与业务侧沟通,小程序内活动页跳转学生认证页方式改为navigateTo方式,然后帐号侧小程序侧改为navigateBack方式

8、页面文案、功能异常问题

设计交互侧天工页面文案功能异常问题,查看代码并无异常,最后定位到是谷歌翻译插件导致（第一次遇到此类问题）。关掉本地谷歌自动翻译即可

9 ⚠️ 无障碍模式下 输入框不失焦

失焦事件不执行，可以在确定按钮点击后自己执行下

10 安卓webview中h5页面滑动卡顿问题

h5页面大字体时超过一屏，滑动时会卡顿，解决方案：h5下方加个padding-bottom即可。具体原因未知

11、canvas绘图模糊问题：https://juejin.cn/post/7014765000916992036

12、好物对比网站 https://versus.com/cn 在线P图 https://ps.gaoding.com/#/

13、推荐一款vscode插件fe-jump，

使用它能方便我们快捷打开项目依赖的根目录
https://juejin.cn/post/7133219432234483725/

14、CSS来做按钮的节流

https://juejin.cn/post/7165828047520661534 CSS来做按钮的节流防止重复点击，这个挺有意思的。

15、在webview h5页面 大字体时滑动卡顿

加padding-bottom 并且值不为0，可以解决 具体原因暂时未知