javascript - 单击外部事件 div 以停用功能

Question

我有一个 jquery 函数，它在单击切换按钮时卡住 HTML 滚动。 Click here

当用户在容器外部单击时，我想为此功能添加额外的触摸 - 包装器解冻 HTML 的滚动功能

//Freeze page content scrolling
function freeze() {
    if ($("html").css("position") != "fixed") {
        var top = $("html").scrollTop() ? $("html").scrollTop() :
            $("body").scrollTop();
        if (window.innerWidth > $("html").width()) {
            $("html").css("overflow-y", "scroll");
        }
        $("html").css({
            "width": "100%",
            "height": "100%",
            "position": "fixed",
            "top": -top
        });
    }
}

//Unfreeze page content scrolling
function unfreeze() {
    if ($("html").css("position") == "fixed") {
        $("html").css("position", "static");
        $("html, body").scrollTop(-parseInt($("html").css("top")));
        $("html").css({
            "position": "",
            "width": "",
            "height": "",
            "top": "",
            "overflow-y": ""
        });
    }
}

var frozen = false;

$("#addFixed").click(function() {
    if (frozen) {
        unfreeze();
        frozen = false;
    } else {
        freeze();
        frozen = true;
    }
});

Answer 1

一个解决方案可以是:

$("body").click(function(e) {
    if ($(e.target).closest("#addFixed").length) {
        console.log("Clicked inside #addFixed");
        freeze();
    } else { 
        console.log("Clicked outside #addFixed");
        unfreeze();
    }
});

在没有任何 stopPropagation 调用的情况下使用一个处理程序将允许通知其他人并允许您处理卡住/解冻逻辑