问题描述

点击搜索按钮，弹出全屏遮罩，遮罩中间是搜索框。现在要求点击除了搜索框以外的空白处，就隐藏遮罩。问题是，点击搜索框以后，遮罩也被隐藏了，怎么破？

解决方法

利用 stopPropagation方法，阻止点击事件即可。示例代码如下：

(function($) {
    //搜索按钮点击事件
    $('.display-search').on("click", function() {
        $('.search-wrap').toggleClass('active');
    });
    //遮罩点击事件
    $(".search-wrap").on("click", function() {
        $(this).toggleClass('active');
    });
    //搜索框点击事件，利用stopPropagation阻止其他事件即可
    $(".search-wrap .search-input").on("click", function(e) {
        e.stopPropagation();
    });
})(jQuery);