Javascript 单击div框外部时隐藏，但当且仅当鼠标从外部开始上下移动时隐藏

我有一个登录按钮（class=登录按钮），如果该按钮点击，它将显示一个带有登录表单的div框（class=登录框），例如：

现在，如果用户单击外部，我隐藏

.login框的方式如下

$(document).mouseup(function(e){
    var targetbox = $('.login-box');
    if(!targetbox.is(e.target) && targetbox.has(e.target).length === 0){
        $('.login-box').fadeOut('fast');
    }
});

但问题只出现在Chrome和Safari上（不是Firefox），如果用户选择一个文本框，如中所示，希望删除文本，突出显示文本，但在div外释放按钮，则会隐藏登录框，但在Firefox上则不会。
我的问题是如何防止这种情况发生。当且仅当用户
在框外单击鼠标并在框外释放鼠标时，是否仍有隐藏框的方法？
只需使用click而不是mouseup-您所描述的就是click所做的。防止事件冒泡，以停止单击文档的按钮


$(document).ready(function(){
    $('.login-button').click(function(event){
        event.stopPropagation();
        $( ".login-box" ).show();
    });
});

$(document).click(function(e){
    var targetbox = $('.login-box');
    if(!targetbox.is(e.target) && targetbox.has(e.target).length === 0){
        $('.login-box').fadeOut('fast');
    }
});

单击框外的鼠标并释放框外的鼠标
只需使用click而不是mouseup-您描述的就是click的作用。@如果是这样，只要我单击login按钮，它将显示，然后再次直接隐藏。防止事件冒泡，或在文档单击函数中添加忽略该事件的条件。@popleak能否向我展示防止冒泡的示例代码？谢谢当然，请检查答案和演示。
$(document).ready(function(){
    $('.login-button').click(function(event){
        event.stopPropagation();
        $( ".login-box" ).show();
    });
});

$(document).click(function(e){
    var targetbox = $('.login-box');
    if(!targetbox.is(e.target) && targetbox.has(e.target).length === 0){
        $('.login-box').fadeOut('fast');
    }
});