Question

每当select元素更改其值时，我都会执行功能设置。它不是使用普通的onchange事件，而是每300ms执行一次，只有在检测到更改的值时才调用处理程序。我正在使用原型Form.Element.Observer，如果这对您来说意味着什么。

现在，在Firefox中，当用户将鼠标悬停在option上并且定时值检查功能触发时，将调用处理程序，因为浏览器会说该值已更改。我想要做的是能够检测用户实际选择的选项何时而不是简单地悬停在上面。我在Prototype文档中意识到，他们明确地注意到这个bug（或功能，取决于你如何看待它），但我希望能够规范化行为。

在某种程度上，这有点类似于我之前在StackOverflow上看到的问题（Detect if an HTML select element is expanded (without manually tracking state)），但我希望那里的某个人能告诉我如何只为特定的选择做这个元素，当它关闭而不是扩展时。

为了更好地理解我的意思，请查看http://jsfiddle.net/KxQd6/，弄乱select元素并查看控制台日志。

Answer 1

以下是一个示例，说明如何通过您提到的不同阶段控制SELECT元素更改：

（用户，dom-load和js更新）

此代码使用event.simulate，它提供了一种跨浏览器触发/模拟事件的方式。

代码（fiddle）

document.observe('dom:loaded', function() {
    var select = $('box_1'),
        button_1 = $('change_via_ajax'), 
        button_2 = $('change_via_script'), 
        results = $('results');

    // create observer on our select
    select.observe('change', function(e) {
        var d = new Date()
            t = d.getHours() + ':' + d.getMinutes() + ':' + d.getSeconds();
        results.insert(new Element('div')
               .update(t + ' - Change was fired, value is now [' + this.value + ']'));
    });

    button_1.observe('click', function() {
        new Ajax.Request('/echo/json/', {
            onComplete: function(j) {
                select.options[Math.round(Math.random() * 2)].selected = true;
                select.simulate('change');
            }
        });
    });

    button_2.observe('click', function() {
        select.options[0].selected = true;
        select.simulate('change');
    });
});

Answer 2

查看https://github.com/harvesthq/chosen（尤其是https://github.com/harvesthq/chosen/blob/master/coffee/chosen.proto.coffee第68-89行）。无法确定SELECT元素的当前状态 - 只能通过一堆用于鼠标，键盘和UI事件的事件观察器来或多或少地可靠地跟踪它。

JS / Prototype - 检测SELECT元素折叠或实际选择的选项

2 个答案: