点击外部时如何恢复正常？ [Javascript]答案

【问题标题】：how to go back to normal when clicked outside ? [Javascript]点击外部时如何恢复正常？ [Javascript]
【发布时间】：2018-08-04 07:36:20
【问题描述】：

我只是在 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();
});

【问题讨论】：

标签： javascript html css filter

【解决方案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
}

【讨论】：

@Everyone 使用 sn-ps：在 sn-p 编辑器中，左侧有一个 tidy 按钮，可以自动格式化您的代码。
@Amit Mankotia 谢谢，效果很好。顺便说一句，我只是想知道当再次单击按钮时，我有什么办法可以在关闭时做同样的事情。就像第一次点击会激活亮度，第二次点击会再次重置它

【解决方案2】：

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

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

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

e.target.id 是启动事件的元素：这里是您点击的元素。

【讨论】：