昨日,做小工具开发的时候,在脚本中写了这么以下这么一段代码:
$(‘body’).on(‘keydown’, function(ev){
if(ev.ctrlKey){
rangeSelect = !rangeSelect;
this.Select(rangeSelect);
}
});
代码主要功能是能够选择容器内的元素,支持两种方式:1、单选,2、拖拽范围选择;通过ctrl键来切换“单选”和“拖拽”模式。
在测试过程中发现,切换到“拖拽”模式时,在拖拽结束后(鼠标松开),意外发现有单选框的闪动出现。这说明模式在瞬间被切换到“单选”模式,接着又切换回“拖拽”模式。 同时,又发现鼠标双击,居然也能切换模式。。这蛋疼了,于是一个下午就在排查这个问题。
原因分析
将所有鼠标事件监听函数移除后,历经各种煎熬,再加上上面的分析,终于发现,在chrome下,鼠标双击,鼠标拖拽释放,都会触发keydown事件,再深入一步,触发的是ctrl键,即event对象中的ctrlKey为true。于是,蜀黍我天真的以为这是chrome的bug,又因为是UI层上的bug,于是有可能是webkit的bug,在safari下发现也会出现这样的问题,在其他浏览器则不会。
为了进一步证实自己的想法,有了以下测试代码:
document.body.onkeydown = function(ev) {
console.log(ev.ctrlKey);
};
我在浏览器控制台输入以上代码,然后:按ctrl键盘,鼠标双击,鼠标拖拽释放。发现浏览器都会打印出true,而且鼠标双击,鼠标拖拽释放会打印出2次true,这说明,事件被触发2次。
好了,到这里还没结束,慎重起见,我让同事也用上面的代码在chrome下测试,发现居然没有问题,也就是说鼠标双击与拖拽都不会触发keydown事件,这下我又纳闷了,难道我的机器奇葩了? 于是,我把chrome的插件全部停用,发现还是有问题,接着我把QQ,旺旺,Evernote等软件也一步一步关闭测试,最后发现,将有道词典关闭时,bug解决了。。。到了这一步,大家懂了吧。。 不懂可以看标题。。!!~!~!
总结
真荣幸,第一次碰到了由桌面软件引起的浏览器脚本冲突,当然,该文所记录的问题还需要各位观众去测试一下看看,我的测试环境是:chrome22,有道5.1。 相关的一些其他控制键经过测试,暂未发现问题。 同时也希望有道的相关人员确认下- -!
不管怎么样,这个问题其实给前端带来了更进一部的工作量,排查bug时,还要注意桌面软件可能引起的异常行为。