javascript - 在没有jQuery的情况下在外部单击时模糊div

看了很多东西之后，我无法解决这个问题：

我有一个过滤器列表，如下所示：

<div class="filters_list">
    <div tabindex="-1" class="filter_box" id="'mask1.png'" onclick="selectFilter('mask1.png')">
        <img class="filter" id="'mask1.png'" src="pictures/filters/'mask1.png'"/>
    </div>
    <div tabindex="-1" class="filter_box" id="'mask2.png'" onclick="selectFilter('mask2.png')">
        <img class="filter" id="'mask2.png'" src="pictures/filters/'mask2.png'"/>
    </div>

//...

并且img随所选过滤器而变化：

<img class="filter_img" id="filter_image" src="">

function selectFilter(filter_name)
{
    document.getElementById(filter_image).src = "/pictures/filters/" + "filter_name";
}

当用户在过滤器列表之外单击时，我想清空src的img。

function blur()
{
    document.getElementsByClassName("filter_img")[0].src = "";
}

当过滤器列表元素之一模糊或在其外部单击时，如何在没有jQuery的情况下触发blur()函数？

最佳答案

将点击事件添加到正文，然后将检查写到最接近的.filters_list元素。

document.body.addEventListener('click', e => {
  if (!e.target.closest('.filters_list')) {
    blur();
  }
});