点击"提交"按钮时,jQuery停止.blur()事件

Question

我正在使用简单的演示电子邮件注册表单构建一个小型登录页面.我希望在聚焦时打开表单域,然后缩小模糊.

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

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

Answer 1

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

所以:

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);
    }
});?

在这里演示