Question

我正在使用简单的演示电子邮件注册表单构建一个小型目标网页。我希望在聚焦时打开表单域，然后缩小模糊。

然而，我遇到的问题是，当您单击提交按钮时，这会启动模糊功能，隐藏按钮并缩小表单。我需要找到一种方法来停止.blur（）方法只有当用户点击以关注提交按钮时。这有什么好的解决方法吗？

非常感谢我能得到任何帮助！

Answer 1

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

所以：

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

Answer 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

Answer 3

在.blur处理程序中尝试此操作：

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

Answer 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验证器将使支持电子邮件的格式成为支持。

点击“提交”按钮时，jQuery停止.blur（）事件

4 个答案: