Блог

Как я могу объединить эти две функции в одну? Теперь у меня есть две функции, которые делают одно и то же: закрывают окно поиска на сайте — нажатием escape и нажатием снаружи определенного .

     searchOverlay.addEventListener('keydown', function(event){
        if(event.key === "Escape"){
            body.classList.remove('search-opened');
            event.stopPropagation();
        }
    });

    searchOverlay.addEventListener('click', function (e) {
        if (e.target.closest('.search-inner') === null) {
            body.classList.remove('search-opened');
            e.stopPropagation();
        }
    });
}
 

Вы даже можете просто создать прослушиватель событий, который поддерживает оба случая

 function removeSearchOpenedClass(event) {
  if (event.key === "Escape" || !event.target.closest(".search-inner")) {
    body.classList.remove('search-opened');
    event.stopPropagation(); 
  }
}
searchOverlay.addEventListener('keydown', removeSearchOpenedClass)
searchOverlay.addEventListener('click', removeSearchOpenedClass)
 

Вы можете объявить функцию и вызвать ее в обоих обратных вызовах.

 function doStuff(e){
    body.classList.remove('search-opened');
    e.stopPropagation();
}

searchOverlay.addEventListener('keydown', function(event){
    if(event.key === "Escape"){
        doStuff(event)
    }
});

searchOverlay.addEventListener('click', function (e) {
    if (e.target.closest('.search-inner') === null) {
        doStuff(e)
    }
});