Question

我想要触发的输入上有一个更改事件，除非您单击列表项。基本上我调用一个函数来更改它时检查这个字段，但是还有一个自动完成脚本，在你选择的输入下方添加一个无序列表，当你单击一个项目来填充输入字段时触发更改（基本上在添加新值之前触发）。这是javascript代码：

document.observe('dom:loaded',function() { 
    new Ajax.Autocompleter("search_input", "found_input", "someurl.jsp", {
        afterUpdateElement: updateSelectedItem,
        minChars: 2
    });
    if ($('search_input') != undefined) {
        $('search_input').observe('change', function(e, el) {
            if (e.explicitOriginalTarget.up(1) != undefined && e.explicitOriginalTarget.up(1).id != "found_input") {
                checkFunction(this.value);
            }
        });
    }
});

我在其中添加了explicitOriginalTarget，因为它在Mozilla浏览器中有效，但这不是跨浏览器解决方案。我还尝试添加一个在单击无序列表项时添加的变量，但是在search_input字段之后触发它，因为它在DOM之后。

感谢您的帮助。

编辑：

你可以在这里看到一个小例子：http://jsfiddle.net/DfMYE/5/ 如果您开始输入'test'，您将看到2个选项的下拉列表。单击其中一个时，它会触发change事件和select事件。如果我们点击选择列表，我想停止更改事件。

Answer 1

这是我公认的黑客解决方案：http://jsfiddle.net/kkFsJ/1/

正在发生的事情是，通过单击自动完成选项，您将模糊输入字段，因此提交您键入的任何值，并在字段上调度change事件。这就是在您能够单击（需要使用mouseup）自动完成选项之前，触发该功能以用您选择的内容替换输入内容。这是你问题的根源。

我不完全理解为什么在您进行自动完成选择后，不会调用另一个更改事件（至少在Safari中）。我想知道以编程方式更改输入值是否不会触发更改事件。我应该知道是不是这样，但我需要测试它。有什么想法吗？

所以 - 我所做的是将Autocompleter.Local类子类化，并将onClick回调分配给每个li的 mousedown 事件。这似乎在表单的模糊事件（因此触发更改）之前触发onClick。然后，我在输入字段上手动触发更改事件。

我仍然需要设置changing标记，以便单个自动完成选择不会多次调用searchHandler回调。这发生在Firefox中。我推迟这个回调的实际工作，让事件稳定下来，然后关闭changing标志。对不起，这是最粗糙的部分。

需要注意的一点是，如果选择自动填充选项，则无论选择的值是否与输入字段中最初的值不同，都会始终触发更改事件。避免这种情况需要更多修补自动完成代码，如果你愿意，我会让你照顾。另外，我只在Mac上的FF和Safari中测试了这一点，所以如果要投入生产，请进行适当的测试和调整。

希望这可以解决或至少给你一些想法。如果您或其他任何人对此问题有不同的看法（除了重写自动完成功能），我也很乐意听到。

事件监听与事件操作排除

1 个答案: