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

Question

我刚刚测试了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();
});

Answer 1

通过按钮停止事件冒泡并在单击窗口时重置

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

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

window.onclick = function() {
  // code for resetting to normal
}

Answer 2

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

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

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

e.target.id是启动该事件的元素：此处就是您单击的元素。