在外面单击时如何恢复正常？[Javascript]

我只是在测试javascript和css过滤器中的一些功能。因此，我只创建了三个特定的按钮，当我点击其中一个按钮时，图像上的过滤器将更改为30%。所以我想在这里做的是，当我点击按钮外面时，它应该会再次变为正常。请帮忙

以下是迄今为止的jS代码：

const br = document.getElementById("br");
const img = document.getElementById("test-img");

br.addEventListener("click", function(e) {
    img.style.filter = "brightness(30%)";
    e.preventDefault();
});

---

停止按钮中的事件冒泡，并在单击窗口时重置

const br=document.getElementById（“br”）；
常量img=document.getElementById（“测试img”）；
br.addEventListener（“单击”，函数（e）{
img.style.filter=“亮度（30%）”；
e、 预防默认值（）；
e、 停止传播（）；
});
window.onclick=function（）{
//重置为正常值的代码
}

当未单击某个特定按钮时，更改某些内容的最简单方法是在单击文档上的任何内容时触发更改，按钮除外：

document.addEventListener("click", (e) => {
    if (e.target.id !== "#br") {
        removeVisualEffects(img);
    }
});

function removeVisualEffects(image) {
    image.style.filter = "none";
}

---

e.target.id

是启动事件的元素：这里是您单击的元素。

@每个使用代码段的人：在代码段编辑器的左侧有一个

tidy

按钮，可以自动格式化您的代码。@Amit Mankotia感谢您，效果很好。顺便说一句，我只是想知道，当再次单击按钮时，是否有任何方法可以执行相同的开关操作。例如，第一次单击将激活亮度，第二次单击将再次重置亮度