javascript - 点击外面如何恢复正常？[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();
});

标签： javascripthtmlcssfilter

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
}