记一次多事件绑定中自己给自己设置的坑——click，dblclick，mousedown，mousemove，mouseup
- 2021 年 1 月 11 日
- 筆記
- javascript
项目综述
- 在页面中模拟某操作系统的操作界面，提供应用窗口的最大化、最小化、还原等功能
需求
- 对一个应用窗口标题栏双击使其铺满整个视口，再次双击还原到原来大小，和位置
- 部分代码片段如下：
win.addEventListener('dblclick', (event) => {
if (cache && cache.status === 'normal') {
Win.maximize(id);
} else if (cache && cache.status === 'maximize') {
Win.restore(id);
}
});
- 在Win.restore()和Win.maximize()方法中通过id读取该应用的缓存信息
{
top: app.cache.pos.top,
left: app.cache.pos.left,
width: app.size.width,
height: app.size.height,
}
问题
-
Chrome浏览器(87)
- 使用电脑自带触摸板进行双击测试，正常
- 使用鼠标进行双击测试，双击事件触发后cache.pos内的内容丢失，top和left属性不存在，cache中其余属性正常
-
Edge浏览器(87)
- 表现与Chrome浏览器一致
-
Firefox浏览器(84)
- 在使用电脑自带触摸板和鼠标测试时，双击事件触发后均出现cache.pos内的内容丢失的情况，其余属性正常
猜想
- 对象嵌套深度问题？？？毕竟嵌套最深的丢了，其他的都没事
// 将left和top直接定义在cache，表现与之前测试结果一致，修改无效
{
top: app.cache.top,
left: app.cache.left,
width: app.size.width,
height: app.size.height,
}
- 命名冲突问题？？？
// 将属性名加上前缀，表现与之前测试结果一致，修改无效
{
top: app.cache.winTop,
left: app.cache.winLeft,
width: app.size.width,
height: app.size.height,
}
-
事件冲突问题，该元素同时定义了单击事件，但注释掉单击事件后问题依旧存在
-
双击事件的BUG?？？？？？？？
// 使用单击事件模拟双击事件，在谷歌和Edge中使用触摸板最大化和还原也会造成数据丢失了
function doubleclick(elem, onsingle, ondouble) {
if (dblFlag) {
dblFlag = true;
setTimeout(function () {
if (dblFlag) {
onsingle(elem);
}
dblFlag = false;
}, 300);
} else {
dblFlag = false;
ondouble(elem);
}
}
解决
-
就在我已经快要放弃这个功能的时候，发现这个元素还绑定了另外一个事件
-
为了让窗口可以在页面中自由拖动，加入了mousedown，mousemove，mouseup事件模拟拖拽事件，提前声明变量currentLeft和currentTop，在mousemove时修改两个属性的值，在mouseup时保存当前位置，如下代码:
window.onmouseup = function () {
window.onmousemove = null;
app.cache.pos.left = currentLeft;
app.cache.pos.top = currentTop;
return false;
}
- 在双击事件中连续触发了mouseup和mousedown，所以给top和left写入了新值
但是，双击事件并没有触发到mousemove事件，导致currentLeft和currentTop没有值写入，还是初始的未赋值状态，并将undefined写入了缓存，也就是cache.pos内属性丢失的问题
- 知道了问题就好解决了，加一个判空就行了
window.onmouseup = function () {
window.onmousemove = null;
app.cache.pos.left = currentLeft || app.cache.pos.left;
app.cache.pos.top = currentTop || app.cache.pos.top;
return false;
}
- 至于使用触摸板和使用鼠标导致差异，大概是用鼠标手比较稳，双击不会出现位置移动，而触摸板两次点击很难都点中同一位置，或多或少有差异，触发mousemove写入了新值
- 不同浏览器的不同表现，大概是对双击事件中两次点击的误差范围规定不同，改用了单击事件模拟双击事件后，浏览器的表现就一致了
反思
- 能给初始值就给初始值，不能给初始值在使用的时候一定要给默认值！
- 别瞎想，看看自己的猜想，连边都没有摸到，在用单击事件模拟双击时就应该联想到其余的事件，然后检查是否相互影响
- 就自己目前的水平，所有的问题都一定是自己的问题！
- 自己坑起自己来果然是不遗余力啊！
