今天做项目的时候遇见了一个小bug,感觉挺有意思的.分享一下bug和处理方法.
如图所示:
这是一个后台系统修改数据的,客户点击表单可以直接修改数据.
底层原理是当用户点击表格时,声明一个变量存储此时的数据,然后清空表格的innerHTML内容,表格新增一个input子元素,input的value设置为我们之前存的变量.当用户修改完成后,发送请求就完成修改.
这个bug是如何出现的呢?
首先我想到的是经过了两次的赋值,后面我发现,原因就是表格没有占满这个盒子,下面是这个盒子的盒子模型
当用户拖着输入框的字,按着鼠标一直不送,然后在padding区松开鼠标的时候就出现bug了
原因就是出现在这个padding上.
在设置输入框的时候我是设置了input的宽高和父盒子是一样高的.所以一开始根本没有想到这个原因.
说说我的解决方法.设置一个正则阻拦,只有正则通过才能再一次的赋值.这样的话,从头到尾,我们赋值的过程只有一次,就阻断了二次赋值.
或者从布局入手,从根本上去除掉这个padding.
