有道词典导致webkit内核浏览器ctrl键的意外触发

   昨日,做小工具开发的时候,在脚本中写了这么以下这么一段代码:

$(‘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时,还要注意桌面软件可能引起的异常行为。
       
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值