Question

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

我的过滤器列表如下：

<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()函数？

Answer 1

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

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

Answer 2

您可以向文档添加onClick事件，并检查最接近的元素是否不是filter_list 如果没有，您可以删除img的src：

document.addEventListener("click",function(e){
   if (!e.target.closest(".filters_list")) {
      blur();
   }
}

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

2 个答案: