如何在点击时添加异常(JS)

Question

有一个搜索字段被overflow：hidden属性隐藏，当您按下单击按钮时，搜索字段会向左移动。我试图在点击除块本身以外的任何区域时使搜索框向右移动，但我有一个错误。

Bug: I can’t enter anything in the search field, the block immediately shifts to the right =(

单击除​​块本身

PS。我还是JS的新手。请不要骂我=(

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'){  // ****** My unsuccessful attempt to fix the bug ****** 
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">CLICK</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

到此为止。您只需要最后删除Else语句，并将Else If的类名更改为Cross按钮的类名。

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 =='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">CLICK</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>