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

Question

我有一个登录按钮(class = login-button)，如果单击该按钮，它将显示一个带有登录表单的 div 框(class = login-box)，例如:

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

现在，如果用户点击外部，我隐藏 .login-box 的方式如下

$(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 上则不然。我的问题是如何防止这种情况发生。当且仅当用户在框外单击鼠标并在框外释放鼠标时，是否才能隐藏该框？

Answer 1

只需使用单击而不是鼠标向上 - 您所描述的就是单击的作用。防止事件冒泡，停止点击文档按钮的点击。

<强> Demo

$(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');
    }
});