Javascript / JQuery：如何使用警告框添加不会触发两次的按键/模糊事件？ 仅限IE

Question

我有一个输入字段，我想在用户按下输入或点击它时验证，为此我使用事件keypress和blur 。 如果输入验证失败，则会调用警告框。

我注意到在IE（所有版本）中，如果我输入无效输入，由于某种原因，按键和模糊事件都被触发（我怀疑它是警告框，但它不会在FF / Chrome上执行此操作）和它显示了两个相同的警报框。 我怎么能这样才能显示一个？

编辑：在FF / Chrome中，我现在注意到在我尝试使用回车验证后点击任意位置时会出现第二个警告框。

简化代码：

$("#input-field").keypress(function(event) {
    if (event.keycode == 13) {
        event.stopPropagation();
        validate();
        return false;
    }
});

$("#input-field").blur(function() {
    validate();
});

function validate() {
    if ($("#input-field").val() == '') {
        alert("Invalid input");
    }
}

编辑：啊哈。 不是真正的修复，而是我忘记了一个单独的细节 - 我需要将无效输入恢复为其先前有效的值，因此当validate函数再次检查该值时，它不会失败两次。

Answer 1

我最后只是检查IE UserAgent并跳过IE的按键事件（将按键和模糊绑定到相同的功能，如下所示）。 不幸的是，这不是一个直接或极好的解决方案，但我一直在寻找解决同样的问题无济于事。 一些可能有用的小注释：jQuery规范化哪些，所以你可以放心地使用e.which == 13 with keypress。 我还将这些函数组合成一个绑定，例如

$("#input-field").bind('blur keypress', function(e) {
    if(e.which == 13) {
        // keypress code (e.g. check for IE and return if so)
    }
    validate();
});

我已经尝试设置全局变量并使用jQuery的data（）来分配任意标志，以指示是否已经为元素触发（在您的情况下）验证，但事件同时或至少，如果顺序，快速触发，即使使用将一些标志设置为true的开始行没有做到这一点。 我已经读过，放入一个很小的回调延迟可能会有所帮助，但这很麻烦，即使作为一种解决方法，我也不会这样做，所以我没有测试过它。 stopPropagation（）和preventDefault（）也没有帮助。

Answer 2

Firefox没有正确获得keypress事件。 这些事件仅在按下产生字符的组合键时触发（这与按任意键不同）。

改为使用keydown （因为这可能是IE正确处理的唯一事件 - 因为它应该，因为MS“发明了”它;-)）。

请参阅http://www.quirksmode.org/dom/events/keys.html 。