Что поменять в скрипте блока, чтобы он закрывался при нажатии на body, а не id dropdownButton?

Question

[Yii-sibnet]

Не могу сообразить, что нужно поменять в скрипте, чтобы атрибут data-show и класс show пропадали при нажатии на body, а не dropdownButton.

document.addEventListener("DOMContentLoaded", (() = > {
        var e = document.getElementById("dropdownButton"),
                n = document.getElementById("dropdownMenu");
        const i = (0, t.createPopper)(e, n, {
                placement: "bottom-start"
        });
        e.addEventListener("click", (function (t) {
                t.preventDefault(),
                n.hasAttribute("data-show") ? (n.removeAttribute("data-show"), n.classList.remove("show")) : (n.setAttribute("data-show", ""), n.classList.add("show"), i.update())
        }))
}));

Answer 1

[zxf]

Повесьте слушатель события клика на body, а не на e, а внутри функции обработчика добавьте условие if (…) в котором проверяйте, если нажат нужный вам элемент / нужный мне элемент не нажат -> удалить data-show.
Условия внутри if могут оказаться весьма объемными в данной задаче, это нормально.

И да, чтобы получить доступ к элементу, взывавшему событие сделайте внутри функции обработчика t.target.

А ещё, аргумент функции обработчика, обычно, называют не t, а e, evt или event. Это для читаемости.