javascript - 绕过 stopPropagation()

Question

曾几何时，一位前端开发人员有一些菜单，当有人在页面上的任何位置单击菜单之外时，他想要关闭一些菜单，因此他使用了一些 if 和提到的方法来处理他的工作。当然，后来这又让他痛不欲生，因为在上述菜单中进行的点击不会生效。我该如何解决这个问题？或者我该如何以不同的方式处理这个问题？我正在使用 bootstrap 3，如果这有帮助的话

HTML

<div class="shopbar pull-right">
    <a data-toggle="collapse" href="#nav-shop" class="collapsed"> <i class="fa fa-lg fa-shopping-cart"></i> </a>
    <a data-toggle="collapse" href="#search" class="collapsed"> <i class="fa fa-lg fa-search"></i> </a>
</div>

...

    <div id="search" class="panel-collapse collapse">
        <div class="container">
            <div class="row">
                <div class="col-xs-12">
                    <div class="input-group">
                        <div class="input-group-btn">
                            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Search In <span class="caret down"></span><span class="caret up"></span></button>
                            <ul class="dropdown-menu">
                                <li><a href="#">Blog</a></li>
                                <li><a href="#">Portfolio</a></li>
                                <li><a href="#">Events</a></li>
                                <li><a href="#">Shop</a></li>
                                <li><a href="#">Pages</a></li>
                            </ul>
                        </div><!-- /btn-group -->
                        <input type="text" class="form-control">
                        <span class="input-group-btn">
                            <button class="btn btn-default fa fa-search" type="button"></button>
                        </span>
                    </div><!-- /input-group -->
                </div>
            </div>
        </div>
    </div>

Jquery

$('html').click(function () {
    $(".shopbar a").addClass("collapsed");
    if ($("#nav-shop").hasClass("in")) {
        $("#nav-shop").collapse('hide');
    }

    if ($("#search").hasClass("in")) {
        $("#search").collapse('hide');
    }
});

$("#nav-shop").click(function (event) {
    event.stopPropagation();
    return true;
});

$("#search").click(function (event) {
    event.stopPropagation();
    return true;
});

Answer 1

$('html').click(function (event) {

    var target = $(event.target);

    if(!target.is("#nav-shop") && !target.is("#search") ) {
        $(".shopbar a").addClass("collapsed");

        if ($("#nav-shop").hasClass("in")) {
            $("#nav-shop").collapse('hide');
        }

        if ($("#search").hasClass("in")) {
            $("#search").collapse('hide');
        }
    }
});

并且不需要event.stopPropagation。