排除事件操作的事件侦听

Event listening with event action exclusion

本文关键字：事件 操作 排除      更新时间：2023-09-26

我在一个输入上有一个更改事件，除了单击列表项时，我想触发它。基本上，当字段发生更改时，我会调用一个函数来检查该字段，但该字段上还有一个自动完成脚本，它会在您选择的输入下方添加一个无序列表，当您单击一个项目来填充输入字段时，它会触发更改（本质上是在添加新值之前触发）。这是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浏览器中工作，但这不是一个跨浏览器的解决方案。我还尝试添加一个变量，该变量在单击无序列表项时会被添加，但它在DOM中的search_input字段之后会被触发。

谢谢你的帮助。

编辑：

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

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

实际情况是，通过单击自动完成选项，您模糊了输入字段，因此提交了您键入的任何值，并在字段上调度了更改事件。这一切都是在您能够点击自动完成选项上的（这需要鼠标向上）以触发该功能以用您选择的内容替换输入内容之前完成的。这是你问题的根源。

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

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

我仍然需要设置一个changing标志，这样searchHandler回调就不会因为一个自动完成选择而被多次调用。这发生在Firefox中。我推迟了这个回调的实际工作，让事件稳定下来，然后关闭changing标志。对不起，这是最恶心的部分。

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

希望这能奏效，或者至少能给你一些想法。如果你或其他人对这个问题有不同的看法（除了重写自动补全功能），我很乐意听到。

相关文章：