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上却没有。我的问题是如何防止这种情况发生。当且仅当用户click the mouse outside the box and release the mouse outside the box？

时，是否仍然隐藏该框

Answer 1

只需使用click而不是mouseup - 您所描述的是点击的内容。防止事件冒泡以停止单击按钮单击文档。

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

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

1 个答案: