单击选择列表的滚动条时如何保留输入焦点

Question

我为 mootools 编写了一个小插件，以便将时间选择器附加到输入字段。

它工作得很好，但我注意到在 Chrome 中，当您单击滚动条以浏览选择器列表时，输入会失去焦点。在其他浏览器中，它不会失去焦点。

http://jsfiddle.net/SDBCe/

//the events that close the selector during blur:
el.addEvents({
    'focus': function() {
        TimePicker.active(el);
    },
    'blur': function() {
        setTimeout( function() {
            el.fireEvent('change');
        },150);
    },
    'change': function() {
        TimePicker.validateField(el);
        TimePicker.inactive(el);
    },
    'keypress': function(evt) {
        if(evt.key == 'enter') {
            el.blur();
        }
    }
});

我应该如何调整我的事件，以便仅使用下拉列表上的滚动条不会模糊我的输入？

Answer 1

在调查了其他一些选择器之后，我意识到诀窍不是添加一个关闭模糊列表的事件，而是通过执行以下操作检查其他可能性来模拟模糊事件：

1. upon the opening of the list, add a click event to the document that
   checks to see if the click is not on in the active input, and not on
   the active list. If this is true and the click is in fact on a non-listy
   part of the document, then close it.
2. add an event to each list item in the suggest list (when the list is
   open only) that selects the value and closes the list.
3. add an keydown event to the input itself so if the user hits enter,
   it changes the value and closes the list.

新版本的javascript代码可以在这里找到：http://jsfiddle.net/SDBCe/1/