jQuery mouseup and Undesired Behavior

Question

I have a "login" div styled as a button, which, when clicked, will unhide a login form area.

If you click the button again, it will hide the login form area.

However, it is behaving undesirably in one scenario. When the form is showing (unhidden, after clicking on the login button), and the mouse pointer is within the login form area, and you push a mouse button down (and hold it), then drag mouse out of the login form area and depress the mouse button the form closes.

My question is - how can I prevent that undesired behavior, while retaining the other behavior?

The HTML:

<div id="loginContainer">
<span id="loginButton"><span>log in</span></span>
<div id="register"><a href="#">sign up</a> or: </div>
<div id="loginBox">
    <form id="loginForm" method="post">
        <fieldset id="body">
            <input type="hidden" name="sAction" value="login" />
            <fieldset>                  
                <label for="sUserId">username or email</label>                  
                <input type="text" name="sUserId" id="sUserId" maxlength="255" />               
            </fieldset>             
            <fieldset>                  
                <label for="sUserPassword">password</label>                 
                <input type="password" name="sUserPassword" id="sUserPassword" maxlength="25" />                
            </fieldset>             
            <input type="submit" id="login" value="log in" />           
        </fieldset> 
    </form>
</div>
</div>

The jQuery:

$(function () {
    var button = $('#loginButton');
    var box = $('#loginBox');
    var form = $('#loginForm');
    button.removeAttr('href');
    button.mouseup(function (login) {
        box.toggle();
        button.toggleClass('active');
    });
    form.mouseup(function () {
        return false;
    });
    $(this).mouseup(function (login) {
        if (!($(login.target).parent('#loginButton').length > 0)) {
            button.removeClass('active');
            box.hide();
        }
    });
});

The CSS:

#register {padding:5px 10px 5px 0;float: right;}

/* Login Container */
#loginContainer {float:right;margin-top: 10px;}

/* Login, Logout Button */
#loginButton, #logout {display:inline-block;float:right;background:#99cc66;border-radius:3px;-moz-border-radius:3px;position:relative;z-index:30;cursor:pointer;}
#logout{color:#fff;height:32px;padding:5px 35px 5px 10px;background:#99cc66 url(../images/login-icon.png) no-repeat 62px 8px;display:block;border: 0;}

/* Login Button Text */
#loginButton span  {color:#fff;padding:5px 35px 5px 10px;background:url(../images/login-icon.png) no-repeat 58px 8px;display:block}

/* Login Box */
#loginBox {position:absolute;top:38px;right:0;display:none;z-index:29;}

/* If the Login Button has been clicked */    
#loginButton.active {border-radius:3px 3px 0 0;}

/* Login Form */
#loginForm {width:248px; border-radius:3px 0 3px 3px;-moz-border-radius:3px 0 3px 3px;margin-top:3px;background:#99cc66;padding:6px;}
#loginForm fieldset {margin:0 0 12px 0;display:block;border:0;padding:0;}
fieldset#body {background:#fff;border-radius:3px;-moz-border-radius:3px;padding:10px 13px;margin:0;}
#loginForm #rememberMe {width:auto;margin:1px 9px 0 0;float:left;padding:0;border:0;*margin:-3px 9px 0 0; /* IE7 Fix */}
#body label {color:#3a454d;margin:9px 0 0 0;display:block;float:left;}
#loginForm #body fieldset label {display:block;float:none;margin:0 0 6px 0;}

/* Default Input */
#loginForm input {width:92%;border:1px solid #899caa;border-radius:3px;-moz-border-radius:3px;color:#3a454d;padding:8px 8px;box-shadow:inset 0px 1px 3px #bbb;-webkit-box-shadow:inset 0px 1px 3px #bbb;-moz-box-shadow:inset 0px 1px 3px #bbb;font-size:12px;}

/* Sign In Button */
#loginForm #login {width:auto;float:right;background-color:#339cdf;color:#fff;padding:7px 10px 8px 10px;text-shadow:0px -1px #278db8;border:1px solid #339cdf;box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none;margin:0 16px 0 0;cursor:pointer;*padding:7px 2px 8px 2px; /* IE7 Fix */}

/* Forgot your password */
#loginForm span {text-align:center;display:block;padding:7px 0 4px 0;}

#loginForm span a {color:#fff;}
input:focus {outline:none;}

Answer 1

If you use click instead of mouseup (which takes into account where the mousedown occurred) it works as expected.

$(function () {
    var button = $('#loginButton');
    var box = $('#loginBox');
    var form = $('#loginForm');
    button.removeAttr('href');
    button.click(function (login) {
        box.toggle();
        button.toggleClass('active');
    });
    form.click(function (e) {
        if (e.target.id !== 'login'){
          e.stopPropagation();
          }
    });
    $(this).click(function (login) {
        if (!($(login.target).parent('#loginButton').length > 0)) {
            button.removeClass('active');
            box.hide();
        }
    });
});

#register {
    padding:5px 10px 5px 0;
    float: right;
}
/* Login Container */
 #loginContainer {
    float:right;
    margin-top: 10px;
}
/* Login, Logout Button */
 #loginButton, #logout {
    display:inline-block;
    float:right;
    background:#99cc66;
    border-radius:3px;
    -moz-border-radius:3px;
    position:relative;
    z-index:30;
    cursor:pointer;
}
#logout {
    color:#fff;
    height:32px;
    padding:5px 35px 5px 10px;
    background:#99cc66 url(../images/login-icon.png) no-repeat 62px 8px;
    display:block;
    border: 0;
}
/* Login Button Text */
 #loginButton span {
    color:#fff;
    padding:5px 35px 5px 10px;
    background:url(../images/login-icon.png) no-repeat 58px 8px;
    display:block
}
/* Login Box */
 #loginBox {
    position:absolute;
    top:38px;
    right:0;
    display:none;
    z-index:29;
}
/* If the Login Button has been clicked */
 #loginButton.active {
    border-radius:3px 3px 0 0;
}
/* Login Form */
 #loginForm {
    width:248px;
    border-radius:3px 0 3px 3px;
    -moz-border-radius:3px 0 3px 3px;
    margin-top:3px;
    background:#99cc66;
    padding:6px;
}
#loginForm fieldset {
    margin:0 0 12px 0;
    display:block;
    border:0;
    padding:0;
}
fieldset#body {
    background:#fff;
    border-radius:3px;
    -moz-border-radius:3px;
    padding:10px 13px;
    margin:0;
}
#loginForm #rememberMe {
    width:auto;
    margin:1px 9px 0 0;
    float:left;
    padding:0;
    border:0;
    *margin:-3px 9px 0 0;
    /* IE7 Fix */
}
#body label {
    color:#3a454d;
    margin:9px 0 0 0;
    display:block;
    float:left;
}
#loginForm #body fieldset label {
    display:block;
    float:none;
    margin:0 0 6px 0;
}
/* Default Input */
 #loginForm input {
    width:92%;
    border:1px solid #899caa;
    border-radius:3px;
    -moz-border-radius:3px;
    color:#3a454d;
    padding:8px 8px;
    box-shadow:inset 0px 1px 3px #bbb;
    -webkit-box-shadow:inset 0px 1px 3px #bbb;
    -moz-box-shadow:inset 0px 1px 3px #bbb;
    font-size:12px;
}
/* Sign In Button */
 #loginForm #login {
    width:auto;
    float:right;
    background-color:#339cdf;
    color:#fff;
    padding:7px 10px 8px 10px;
    text-shadow:0px -1px #278db8;
    border:1px solid #339cdf;
    box-shadow:none;
    -moz-box-shadow:none;
    -webkit-box-shadow:none;
    margin:0 16px 0 0;
    cursor:pointer;
    *padding:7px 2px 8px 2px;
    /* IE7 Fix */
}
/* Forgot your password */
 #loginForm span {
    text-align:center;
    display:block;
    padding:7px 0 4px 0;
}
#loginForm span a {
    color:#fff;
}
input:focus {
    outline:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="loginContainer">
    <span id="loginButton"><span>log in</span></span>
    <div id="register"><a href="#">sign up</a> or:</div>
    <div id="loginBox">
        <form action="test" id="loginForm" method="post">
            <fieldset id="body">
                <input type="hidden" name="sAction" value="login" />
                <fieldset>
                    <label for="sUserId">username or email</label>
                    <input type="text" name="sUserId" id="sUserId" maxlength="255" />
                </fieldset>
                <fieldset>
                    <label for="sUserPassword">password</label>
                    <input type="password" name="sUserPassword" id="sUserPassword" maxlength="25" />
                </fieldset>
                <input type="submit" id="login" value="log in" />
            </fieldset>
        </form>
    </div>
</div>

---

Update after comment

returning false on the click event of the form caused it to not get submitted.

So we need to change it to

form.click(function (e) {
    if (e.target.id !== 'login'){
      e.stopPropagation();
      }
});