Как добавить исключение при клике(Js)

Question

Есть поле поиска, которое скрыто свойством overflow:hidden, при клике на кнопку КЛИК поле поиска выезжает справа. Пытался сделать, чтобы при клике на любую область кроме самого блока окно поиска заезжало обратно, но у меня баг.

Баг: Не получается ввести что-нибудь в окно поиска, блок сразу же уезжает вправо =(

Как заставить блок двигаться назад при нажатии на любую область, кроме области самого блока?

let search_block = document.querySelector(".main_text_field"); 

document.body.addEventListener('click', function(e){  
let x = e.target.className;

if(x == 'open_man_block'){
search_block.style.marginRight = '10px';
}

else if(x =='main_text_field'){  // ****** Моя костыльная попытка исправить баг =( ****** 
search_block.style.marginRight = '10px';
} 

else{
search_block.style.marginRight = '';        
}

});

.search_man_block{
display:grid;
grid-template-columns: repeat(2, max-content); 
border:1px solid black;
justify-content: end;
overflow:hidden;        
}
.open_man_block{
margin-top:15px;
border:1px solid black; 
}
.main_text_field{
margin-top:15px;    
margin-right:-430px;
width:400px;    
display:grid;
grid-template-columns: repeat(3, max-content); 
font-size:17px;
font-family:arial;
border-radius:15px;
box-shadow: 0 0 7px 1px #87cefa;
overflow:hidden;
background: rgba(255, 255, 255, 1);
transition: margin-right 1s;
}
.seacrh_text_field{
width:300px;
padding-left:10px;  
border:none;
outline:none;
}
.text_delete_button{
margin-left:10px;
border:none;
width:36px;
height:36px;    
background: rgba(255, 255, 255, 1);
color:red;
font-size:26px;
}
.text_search_button{
border:none;    
background: rgba(255, 255, 255, 1);
width:36px;
height:36px;    
background-size: cover;
background-image: url("");   
}

<div class="search_man_block">
<div class="open_man_block"> КЛИК</div>

<form class="main_text_field"  role="search" method="get" id="searchform" action="" >
    
    <input type="hidden" value="post" name="post_type" />
    <label class="screen-reader-text" for="s"> </label>
    <input class="seacrh_text_field" type="text" value="" name="s" id="s" />    
    <input type="button" class="text_delete_button"  value="&#10006;">
    <input type="submit" class="text_search_button" id="searchsubmit" value="" />
    
</form>

</div>

Answer 1

Можно при клике искать ближайшего родителя по классу при помощи метода closest('.main_text_field'). И если такого нет, то скрывать форму. Также можно использовать classList.contains вместо className, потому что у элемента может быть больше одного класса в будущем.

let search_block = document.querySelector(".main_text_field"); 

document.body.addEventListener('click', function(e){  

if(e.target.classList.contains('open_man_block')) {
  search_block.style.marginRight = '10px';
  return;
}

if (!e.target.closest('.main_text_field')) {
  search_block.style.marginRight = '';         
}

});

.search_man_block{
display:grid;
grid-template-columns: repeat(2, max-content); 
border:1px solid black;
justify-content: end;
overflow:hidden;        
}
.open_man_block{
margin-top:15px;
border:1px solid black; 
}
.main_text_field{
margin-top:15px;    
margin-right:-430px;
width:400px;    
display:grid;
grid-template-columns: repeat(3, max-content); 
font-size:17px;
font-family:arial;
border-radius:15px;
box-shadow: 0 0 7px 1px #87cefa;
overflow:hidden;
background: rgba(255, 255, 255, 1);
transition: margin-right 1s;
}
.seacrh_text_field{
width:300px;
padding-left:10px;  
border:none;
outline:none;
}
.text_delete_button{
margin-left:10px;
border:none;
width:36px;
height:36px;    
background: rgba(255, 255, 255, 1);
color:red;
font-size:26px;
}
.text_search_button{
border:none;    
background: rgba(255, 255, 255, 1);
width:36px;
height:36px;    
background-size: cover;
background-image: url("");   
}

<div class="search_man_block">
<div class="open_man_block"> КЛИК</div>

<form class="main_text_field"  role="search" method="get" id="searchform" action="" >
    
    <input type="hidden" value="post" name="post_type" />
    <label class="screen-reader-text" for="s"> </label>
    <input class="seacrh_text_field" type="text" value="" name="s" id="s" />    
    <input type="button" class="text_delete_button"  value="&#10006;">
    <input type="submit" class="text_search_button" id="searchsubmit" value="" />
    
</form>

</div>

Answer 2

Типа решение :(

let search_block = document.querySelector(".main_text_field");

document.body.addEventListener('click', function(e) {
  let x = e.target.className;
  console.log(x);
  if (x == 'open_man_block') {
    search_block.style.marginRight = '10px';
  } else if (x == 'main_text_field') { // ****** Моя костыльная попытка исправить баг =( ****** 
    search_block.style.marginRight = '10px';
  } else if (x == 'text_delete_button') {
    search_block.style.marginRight = '';
  }
});

.search_man_block {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  border: 1px solid black;
  justify-content: end;
  overflow: hidden;
}

.open_man_block {
  margin-top: 15px;
  border: 1px solid black;
}

.main_text_field {
  margin-top: 15px;
  margin-right: -430px;
  width: 400px;
  display: grid;
  grid-template-columns: repeat(3, max-content);
  font-size: 17px;
  font-family: arial;
  border-radius: 15px;
  box-shadow: 0 0 7px 1px #87cefa;
  overflow: hidden;
  background: rgba(255, 255, 255, 1);
  transition: margin-right 1s;
}

.seacrh_text_field {
  width: 300px;
  padding-left: 10px;
  border: none;
  outline: none;
}

.text_delete_button {
  margin-left: 10px;
  border: none;
  width: 36px;
  height: 36px;
  background: rgba(255, 255, 255, 1);
  color: red;
  font-size: 26px;
}

.text_search_button {
  border: none;
  background: rgba(255, 255, 255, 1);
  width: 36px;
  height: 36px;
  background-size: cover;
  background-image: url("");
}

<div class="search_man_block">
  <div class="open_man_block"> КЛИК</div>
  <form class="main_text_field" role="search" method="get" id="searchform" action="">
    <input type="hidden" value="post" name="post_type" />
    <label class="screen-reader-text" for="s"> </label>
    <input class="seacrh_text_field" type="text" value="" name="s" id="s" />
    <input type="button" class="text_delete_button" value="&#10006;">
    <input type="submit" class="text_search_button" id="searchsubmit" value="" />
  </form>
</div>

БЛОГ НА HUSL

Как добавить исключение при клике(Js)

Ответы (2 шт):