前言
事情是这样的:这周一,正当我奋笔疾书,忙着写代(mo)码(yu)的时候,我的测试突然偷偷的告诉我,兄弟,你们要上线的项目有个很严重的bug,你得改啊!当时我的脑子里面是这样的:
当我跟他说:咋可能呢,我都测试过了,说着把他叫了过来,然后当着他的面演示了一下。然后他的表情是这样的:
然后他就回到了他的位置上,把我叫了过去,然后他演示了一波,演示完我的表情是这样的:
欲知后事如何,请听下次.....咳咳咳,这次分解。
起因
事件的起因是一个组件vue-easy-dnd,我在项目引入了这个组件,由于是个前端,所以,谷歌浏览器就成了我的最常用浏览器。
而我的测试,用的是火狐,他在测试的过程中,发现当要拖拽的东西是图片的时候,在谷歌上拖拽放下正常,在火狐上会打开一个新叶签来显示图片,并且放下的时候发现那个图片像是粘了狗皮膏药一样,只有再点击一下才行。然后我就打开了浏览器,在drop的时候,打印了一下事件。这里我用一下codesandbox展示一下
在谷歌浏览器上打印是这样的
在火狐上是这样的
通过图上发现,火狐上偶尔会触发dropevent事件,不是我们自定义的事件.所以我得出来了一个结论:
这个组件有bug!!!
于是我去了这个组件的github地址,发现是外国人写的,用我脑子所剩无几的单词,去提了一个issue,
然后过了一晚上,不出意外的,我的issue被关了(我已经预感到了)
他说不是他的包的问题,纳尼??? 我难道测试的有问题么???我此时深深的怀疑了自己
于是我就在codesandbox 写了示例代码,并且@了他
这次很快,贡献者回我了
事情看似到这结束了,但是我项目着急上线,贡献者又没有时间,怎么办呢。没办法,只能自己撸源码了,网上已经说过怎么解决这个问题,基本上都是由于没有阻止事件的默认行为的,所以,我把组件下载下来,在看了他的drop.vue
然后我去找到了混入的代码,在里面drop的时候,打印了一下,奇怪的事情发生了,
这玩意在dropevent的时候根本就没触发。(就是上面火狐那个Dropevent)当时,我脑子就不转了
既然drop不行,难道是drag的时候出了问题,于是去看了DragMixin.ts,发现在onmouseDown的方法最后注释掉了一句话,并没有阻止了事件的默认行为,我自己打开了这句话,然后一试:
居然神奇的好了!!!! 火狐上打印的跟谷歌上一样了
由于这个是注释掉的,上面还有防止touchstart转变成mousedown事件,我并没有提pr,我把我这个结果回复了贡献者,并询问了注释掉的原因,但是,很遗憾,贡献者暂时还没看到。等他回复了,我会在文章下面表明的。
后记
我最近加入了大崔哥的群,诺,就下面的帅哥,我把我这个经历在群里说了,大崔哥回答我,说我提issue的时候一定要有一定的逻辑,并且,给我了一个链接,也就是大崔哥最近开的共读vue3 issue的一个git项目vue-magic
可以详细看看底下的人是怎么提issue。 群里的人也给我了一个 github.com/whylost/vue…
大家在发现开源库的bug的时候,提issue的时候不妨注意一下,好了,就这样吧,我要忙着搬砖了。