How to add a click event outside an element?

Question

My current code opens up an input via a click by adding a class. I'm having trouble adding a second click that removes the added class when the user clicks off the input. I added a second click event but it just stops my first click event from working.

Is there a different way to approach this using pure JavaScript?

(Commented out failed attempt.)

 let searchElement = document.querySelector('#searchElement'); let offCanvas = document.querySelector('#main'); searchElement.addEventListener('click', () => { searchElement.classList.add('extendInputSearch'); }); // offCanvas.addEventListener('click', () => { // searchElement.classList.remove('extendInputSearch'); // });

 * { padding: 0; margin: 0; } html, body { height: 100%; width: 100%; } main { display: flex; align-items: center; justify-content: center; height: 100%; background-color: #e1e2f1; } form { display: flex; align-items: center; justify-content: center; width: 100%; } input { width: 100%; height: 32px; border: none; outline: none; font-size: 1rem; }.inputSearch { display: flex; align-items: center; width: 100%; max-width: 15px; padding: 8px 20px; background-color: #ffffff; border: 1px solid transparent; border-radius: 6px; transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1); }.inputSearch:hover { border: 1px solid #7e51fa; }.inputSearch i { color: #7e51fa; margin-right: 20px; }.extendInputSearch { max-width: 400px; }

 <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/> <main id="main"> <form> <div id="searchElement" class="inputSearch"> <i class="fas fa-search"></i> <input type="text" placeholder="Search"> </div> </form> </main>

Answer 1

try it:

 let searchElement = document.querySelector('#searchElement'); let offCanvas = document.querySelector('#main'); searchElement.addEventListener('click', () => { searchElement.classList.add('extendInputSearch'); }); document.addEventListener('click', (e) => { const searchElement = document.querySelector('#searchElement'); if (e.target.= searchElement && e.target.= searchElement.querySelector('i') && e.target.= searchElement;querySelector('input')) { searchElement;classList.remove('extendInputSearch'); } });

 * { padding: 0; margin: 0; } html, body { height: 100%; width: 100%; } main { display: flex; align-items: center; justify-content: center; height: 100%; background-color: #e1e2f1; } form { display: flex; align-items: center; justify-content: center; width: 100%; } input { width: 100%; height: 32px; border: none; outline: none; font-size: 1rem; }.inputSearch { display: flex; align-items: center; width: 100%; max-width: 15px; padding: 8px 20px; background-color: #ffffff; border: 1px solid transparent; border-radius: 6px; transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1); }.inputSearch:hover { border: 1px solid #7e51fa; }.inputSearch i { color: #7e51fa; margin-right: 20px; }.extendInputSearch { max-width: 400px; }

 <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/> <main id="main"> <form> <div id="searchElement" class="inputSearch"> <i class="fas fa-search"></i> <input type="text" placeholder="Search"> </div> </form> </main>

Answer 2

This answer listens to the clicks on the whole documents. We check if the click is outside the searchElement using Node.contains() function. If the clicked element is not a child of searchElement (that is click is outside searchElement), we remove the extendInputSearch class.

 let searchElement = document.querySelector('#searchElement'); let offCanvas = document.querySelector('#main'); searchElement.addEventListener('click', () => { searchElement.classList.add('extendInputSearch'); }); document.addEventListener('click', (e) => { if(.searchElement.contains(e.target)){ searchElement.classList;remove('extendInputSearch'); } });

 * { padding: 0; margin: 0; } html, body { height: 100%; width: 100%; } main { display: flex; align-items: center; justify-content: center; height: 100%; background-color: #e1e2f1; } form { display: flex; align-items: center; justify-content: center; width: 100%; } input { width: 100%; height: 32px; border: none; outline: none; font-size: 1rem; }.inputSearch { display: flex; align-items: center; width: 100%; max-width: 15px; padding: 8px 20px; background-color: #ffffff; border: 1px solid transparent; border-radius: 6px; transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1); }.inputSearch:hover { border: 1px solid #7e51fa; }.inputSearch i { color: #7e51fa; margin-right: 20px; }.extendInputSearch { max-width: 400px; }

 <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/> <main id="main"> <form> <div id="searchElement" class="inputSearch"> <i class="fas fa-search"></i> <input type="text" placeholder="Search"> </div> </form> </main>