单击“提交”按钮时jQuery停止.blur（）事件答案

【问题标题】：jQuery Stop .blur() event when clicking "submit" button单击“提交”按钮时jQuery停止.blur（）事件
【发布时间】：2012-11-23 16:02:57
【问题描述】：

我正在构建一个带有简单演示电子邮件注册表单的小型登录页面。我希望在聚焦时打开表单字段，然后在模糊时缩小。

但是我面临的问题是，当您单击提交按钮时，这会引发模糊功能，隐藏按钮并缩小表单。只有当用户单击以关注提交按钮时，我才需要找到一种方法来停止 .blur() 方法。有什么好的解决方法吗？

如果我能得到任何帮助，我将不胜感激！

【问题讨论】：

标签： event-handling focus jquery blur

【解决方案1】：

我知道这个问题很老，但最简单的方法是检查 event.relatedTarget。 if 语句的第一部分是防止在 relatedTarget 为 null 时抛出错误（IF 会短路，因为 null 相当于 false 并且浏览器知道如果第一个条件为 false 则不必检查第二个条件在 && 语句中）。

所以：

if(event.relatedTarget && event.relatedTarget.type!="submit"){
     //do your animation 
}

【讨论】：

这太好了，非常感谢。我从未使用过relatedTarget 的属性，我一定会花一些时间阅读它。
似乎是一个很好的方法，但我遇到了这个问题。从最后一个输入切换到提交按钮也会阻止模糊处理程序运行，这是我不希望发生的。
@TimB 你有没有找到解决这个问题的方法，我也面临同样的问题
已经很久了，但我认为我们还没有找到解决方案。

【解决方案2】：

这不是最漂亮的解决方案，但确实有效。试试这个：

$("#submitbtn").mousedown(function() {
    mousedownHappened = true;
});

$("#email").blur(function() {
    if (mousedownHappened) // cancel the blur event
    {
        mousedownHappened = false;
    }
    else // blur event is okay
    {
        $("#email").animate({
            opacity: 0.75,
            width: '-=240px'
        }, 500, function() {
        });

        // hide submit button
        $("#submitbtn").fadeOut(400);
    }
});

DEMO HERE

【讨论】：

是的！非常感谢，我很欣赏这个小的解决方法。最大的问题是当您单击并按住提交按钮时，会发生淡入淡出效果然后按钮消失。但是在这个例子中，您可以无限期地单击并按住，淡化效果被隐藏起来。再次衷心感谢您，非常感谢！

【解决方案3】：

在 .blur 处理程序中试试这个：

if ($(':focus').is('#submitbtn')) { return false; }

【讨论】：

【解决方案4】：

为什么不依赖submit 事件而不是click？ http://jsbin.com/ehujup/5/edit

只需对 html 和 js 进行一些更改

将输入包装到form 并添加required 用于电子邮件，因为它显然假设是

<form id="form">
 <div id="signup">
   <input type="email" name="email" id="email" placeholder="me@email.com" tabindex="1" required="required">
   <input type="submit" name="submit" id="submitbtn" value="Signup" class="submit-btn" tabindex="2">
 </div>
</form>

在js中，删除监听#submitbtn的处理程序

$("#submitbtn").on("click", function(e){
  e.stopImmediatePropagation();
  $("#signup").fadeOut(220);
});

改用提交表单列表器

$("#form").on("submit", function(e){
  $("#signup").fadeOut(220);
  return false;
});

您可以使用$.ajax() 让它变得更好。

这样做可以在验证方面获得优势，并且本机浏览器的 HTML5 验证器将检查支持的电子邮件格式。

【讨论】：