前言
该文章记录一些工作中遇到的问题，以及一些解决办法，慢慢将会添加更多问题，所有内容均从网上整理而来，加上自己的理解做一个整合，方便工作中使用。
1.input框的blur和click事件冲突
1）问题场景
当input框聚焦时，展示元素；当input框失去焦点时，隐藏元素;问题在于失去焦点时，无法触发click事件，因为input框的blur事件先触发。
2）解决办法
//如果没有点击事件，仅用css就能控制元素的显示和隐藏
//html
<input placeholder="请输入信息" type="text">
<div class="tips"></div>
//css
input{
xxxx
}
.tips{
display:none;
xxx;
}
input:focus + .tips{
display:block;
}
//blur和click冲突时，使用JS手动调用 blur和focus事件
//vue 项目中
<input @focus="focus()" @blur="blur()" placeholder="请输入信息" type="text">
<div class="tips"></div>
//js
focus() {
document.querySelector('.tips').style.display = 'flex'
},
blur() {
setTimeout(() => {
document.querySelector('.tips').style.display = 'none'
}, 100)
//失去焦点时，必须要利用定时器，让元素慢点消失，简单测试了如果按住鼠标左边不松，超过定时器设置时间，那么点击事件还是不能触发
}
2.移动端点击input框放大页面
meta标签的作用是让当前viewport的宽度等于设备的宽度，同时不允许用户手动缩放。
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
//name为viewport的meta标签，content中有6个属性值
//widht、height 设置layout viewport的宽/高
//initial-scale 设置页面的初始缩放
//minimum-scale 允许用户的最小缩放值
//maximum-scale 允许用户的最大缩放值
//user-scalable 是否允许用户进行缩放，值为"no"或"yes", no 代表不允许，yes代表允许
3.横向滚动问题
当一个元素容器内容过多，且不能换行，当显示不完时，可以滚动显示，且不显示滚动条。移动端不存在这个问题，隐藏了滚动条也可以滑动，但是PC端页面不行，需要鼠标滚轮配合js移动滚动条位置来实现。
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
</div>
.container {
width: 1000px;
height: 600px;
outline: 5px solid #ec7270;
/* 横向内容auto */
overflow-x: auto;
/* 禁止换行 */
white-space: nowrap;
/* 隐藏滚动条 */
&::-webkit-scrollbar {
display: none;
}
.item {
/* 将子元素变成inline-block */
display: inline-block;
width: 300px;
height: 400px;
background-color: antiquewhite;
margin-right: 30px;
font-size: 60px;
}
}
<script>
$('.container').on('mousewheel', (e) => {
event.preventDefault();
//mousewheel 事件是有兼容问题的，大概是火狐浏览器有问题
//e返回的内容里 deltaY的正负表示-鼠标滚动的方向，其值就是滚动值
//改变滚动条所在元素的scrollLeft就能实现滚动，当鼠标放在该元素上时，滚动鼠标滚轮即可
document.querySelector('.container').scrollLeft += e.originalEvent.deltaY
})
</script>
4.input换行显示
// input框的type=textarea才能使用enter键回车
<el-input type="textarea" v-model="name"></el-input>
// 获取传入的值，使用css使用white-space: pre-line;
5.部分手机new Date("xxx").getTime()返回NaN
使用dayjs，可以避免兼容性问题。
6.按照node-sass报错
1.node.js和node-sass版本不匹配
解决方法：可以使用nvm切换不同版本的node.js
2.替换成淘宝源：
npm config set registry https://registry.npmmirror.com
用
dart-sass来替换node-sass:yarn: yarn add node-sass@yarn:dart-sass -D
npm: npm install node-sass@npm:dart-sass -D
- 注意：如果修改源失败，则手动修改
//.npmrc文件
registry=https://registry.npmmirror.com/
sass_binary_site=https://registry.npmmirror.com
//.yarnrc文件
registry "https://registry.npmmirror.com"
//.vuerc文件
{
"useTaobaoRegistry": false,//设置为false
"latestVersion": "5.0.8",
"lastChecked": 1661148213333
}
7.移动端弹窗时禁止页面整体滚动
const handleTouchMove = e => {
e.preventDefault(); // 阻止默认行为
};
if (payload.status) {
document.addEventListener('touchmove', handleTouchMove, {
passive: false,
});
} else {
document.removeEventListener('touchmove', handleTouchMove);
}
//在 JavaScript 中，`removeEventListener` 需要传入与 `addEventListener` 相同的函数引用。
//如果在添加和移除监听器时使用了不同的函数，移除操作将不会生效。
