IE scrollbar bug

Author : lovecicy

最近在做一个auto-complete的功能,需要在输入框输入字符后可以自动查询,将结果做成下拉列表显示在输入框下面,结果碰到了一个问题。当搜索结果太多,需要用在搜索结果里加滚动条时,在IE下会有bug。

具体情况是这样的,当输入框失去焦点时,需要触发blur事件,隐藏搜索结果。但是当点击滚动条时,会触发IE的blur事件,于是搜索结果会被隐藏,这样就出现了滚动条无法使用的状况。

在参考了网上的解决方法后,修改了代码,具体思路是这样的:

首先为搜索结果绑定blur事件方法。然后对搜索结果添加mousedown事件,当鼠标点下时,判断event.target是否为搜索结果(ul)的一个item(li),如果是则将选中的搜索结果添加到输入框,并将blur事件方法绑定到输入框;如果为否,则unbind输入框的blur事件,并停止冒泡。再为body绑定一个mousedown事件方法,将blur事件方法bind到输入框并触发。

这样,初始化时就为输入框绑定blur事件方法,当用户点击其他区域时将出发body的mousedown事件,为输入框绑定blur事件方法并触发。当用户点击滚动条时,输入框的blur事件被触发,但是blur事件方法被unbind,且停止冒泡,不会触发body的mousedown方法,所以搜索结果不会隐藏,当点击搜索结果区域或别的区域时,将会绑定blur事件方法并触发,这样就可以修正这个bug。

另外还有一个bug就是,在点击滚动条以后,输入框就失去焦点了,再按键盘输入就不会在输入框输入文本了,不知道有什么方法可以在点击滚动条后再将焦点放在输入框并且不会使搜索结果隐藏。

ps,还发现一个chromium的奇怪的地方,鼠标的拖拽会产生一个键盘事件,并且keyup、keydown事件都会产生。

standard
  1. luckygirl - 2012 年 10 月 26 日 1:17 下午

    活到老 学到老

    回复
    • Rohmat - 2012 年 11 月 19 日 3:41 下午

      Absolutely first rate and copper-btotomed, gentlemen!

      回复

Have your say