单击外部应该隐藏div而不是当单击div的子元素时？

Question

我有一个 div 里面有一个 jquery 日历控件，有一个月份的下拉菜单。我希望它在外面点击时隐藏。发生的事情是，当我在外部单击时，它完全隐藏起来，但即使我从下拉框中选择某些内容，它也会隐藏起来。

我已经尝试过了-

 $(document).mouseup(function (e) {
    var container = new Array();
    container.push($('.CalendardivTSFrom'));
    container.push($('.CalendarEditdiv1'));
    container.push($('.CalendarEditdiv'));

    $.each(container, function (key, value)
    {
        if (!$(value).is(e.target))
        {
            e.stopPropagation();
            $(value).hide();
        }
    });
});

当 div 的子元素（下拉菜单）点击时，它不应该隐藏我使用 e.stopPropagation() 的原因。

请帮忙。

谢谢

Answer 1

尝试这样的事情。只要你在包装内点击，它就不会隐藏 div。

$(document).on('click', function (e) {
    if ($('.CalendardivTSFrom').length > 0) {
        var elemDontClose = $('.CalendardivTSFrom'); // wrapper div i guess?!
        var rect = elemDontClose.get(0).getBoundingClientRect();
        var isClickWithinElement = (
            (e.clientX >= rect.left) &&
            (e.clientX <= rect.right) &&
            (e.clientY >= rect.top) &&
            (e.clientY <= rect.bottom)
        );

        if (!isClickWithinElement)
            HideDiv();
    }
});