有道词典导致webkit内核浏览器ctrl键的意外触发
昨日，做小工具开发的时候，在脚本中写了这么以下这么一段代码：$(‘body’).on(‘keydown’, function(ev){if(ev.ctrlKey){rangeSelect = !rangeSelect;this.Select(rangeSelect);}}); 代码主要功能是能够选择容器内的元素，支持两种
·
昨日，做小工具开发的时候，在脚本中写了这么以下这么一段代码：
$(‘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时，还要注意桌面软件可能引起的异常行为。
权威｜前沿｜技术｜干货｜国内首个API全生命周期开发者社区
更多推荐
1
0- 0
已为社区贡献2条内容
所有评论(0)