Question

我有一个带有输入字段的表单，输入字段附加了一个焦点输出事件处理程序我还有一个表单提交处理程序附加表单，所以当用户从输入框焦点出来时，它焦点输出处理程序执行这很好，但是当提交表单时，也会关闭输出框上的事件。那我怎么能阻止这个？

帮助表示赞赏：）

Demo code
<form>
    <input type='text' name='test'/>
</form>


$('input').focusout(function(){
alert('focus out');
});

$('form').submit(function(){
    alert('form submitted');
    return false;
});

当我在firefox中运行上面的代码时，chrome输出是不同的 firefox ：首先提醒焦点，然后提交表单 chrome ：首先提醒表单提交，然后重点关注 为什么它在两个浏览器中都表现不同，我想防止关注表单提交。

Answer 1

您一次只能关注一个元素，因此当您单击提交按钮时，它可能会自动聚焦，并且表单中的所有其他元素都会被聚焦，以及您的事件被触发的位置。

你正在做的事情看起来不是实现任何目标的最佳解决方案，请告诉我们你要做的事情，我们可能会做更好的事情。

Answer 2

使浏览器行为更糟糕。 IE仅在输入时触发提交事件并取消焦点事件。（我发现这个想要的行为），因为按输入按钮，不应该导致输入失去焦点。

在这种情况下，您无法真正预测首先触发哪个事件。

为了防止这种情况，您应该在表单上有一个keydown事件，它会检测用户键盘输入以及最后一次输入是否被聚焦。如果是，则阻止所有事件并提交。

$('input').focusout(function(e){
    alert("Focusout gets fired.");
});

$('form').keydown(function(e){

    if (e && e.target == $('input')[0] && e.keyCode == 13) //13 = enter.
    {
        //submit the form, and in case something goes wrong, prevent default.
        $('form')[0].submit();
        e.preventDefault();
    }

});

旁注：您的form有一个input。只是为了证明这是有效的，我使用$('form')[0]和$('input')[0]来选择元素。在实际表单中，您希望通过id选择器提供这些值。

关注并提交事件解雇顺序

2 个答案: