Прекратите нажимать на оболочку eventListner

Я пытаюсь открыть/свернуть элементы на этой странице. Я использую #wrapper::before для наложения экрана, также у него есть список событий для закрытия отображаемых элементов. Используя {capture: true} в оболочке eventListner, я сделал его открытым и свернутым, но когда я нажимаю на строку поиска, чтобы ввести что-то, он все равно схлопывается.

Как сделать так, чтобы он не сворачивался при нажатии? Только на обертке:: перед

const responsiveIcons = document.querySelectorAll('.mininav>*');
const wrapper = document.querySelector('#wrapper');
const mainNav = document.querySelector('aside');
const searchBar = document.querySelector('form#search');

function openItem(e){
    e.classList.add('show');
    wrapper.classList.add('show');
}

function closeItems(){
    switch(true){
        case mainNav.classList.contains('show'):
            mainNav.classList.remove('show');
            break;
        case searchBar.classList.contains('show'):
            searchBar.classList.remove('show');
            break;
    }
    wrapper.classList.remove('show');
}

function showSelector(e){
    const eClass = e.target.classList;

    switch(true){
        case eClass.contains('nav'):
            openItem(mainNav);
            break;
        case eClass.contains('searchbar'):
            openItem(searchBar);
            break;
    }

    // if(e.target.classList.contains('nav')){
    //     openItem(mainNav);
    // } else if{}
}
wrapper.addEventListener('click', closeItems, {capture: true});
responsiveIcons.forEach(e => e.addEventListener('click', showSelector));
:root {
  --font-family: "Ubuntu", sans-serif;
  --font-size: 16px;
  --title-color: rgb(58, 58, 58);
  --background-color: white;
  --bgHeader: #003459;
  --bgSearchBar: #002a45;
  --headers: #003459;
  --bgMain: #EBF9FF;
  --textColor: #00171F;
  --cardGreen: rgba(157, 255, 0, 1);
  --cardBlue: rgba(0, 174, 255, 1);
  --cardRed: rgba(255, 42, 42, 1);
  --cardYellow: rgba(255, 251, 0, 1);
  --headerMargin: .5rem 0;
  --box-shadow: 0 1rem 1rem -0.75rem rgb(105 96 215 / 18%);
  --wrap-first-column: 14rem;
  --nav-txt-color: #5c5c5c;
}
#wrapper {
  display: grid;
  grid-template-columns: min-content 1fr;
  grid-template-rows: min-content 1fr;
  background-color: var(--bgMain);
  min-height: 100%;
}
#wrapper.show::before {
  content: "";
  position: fixed;
  background-color: black;
  opacity: 0.5;
  z-index: 2;
  width: 100%;
  height: 100%;
}
header {
  grid-column: span 2;
  column-span: all;
  background: var(--bgHeader);
  justify-content: space-between;
}

.brand {
  height: fit-content;
  width: 12.5rem;
  align-items: center;
  margin: var(--headerMargin);
}

header > div + div {
  height: fit-content;
  width: auto;
  align-items: center;
  margin: var(--headerMargin);
  margin: auto 0.5rem;
}

.mininav {
  color: white;
  width: max-content;
  display: inline-block;
  flex-direction: row;
  flex-wrap: nowrap;
}
aside.show {
  left: 0;
}
aside {
    inset: 0 auto;
    position: absolute;
    top: 0;
    left: calc(var(--wrap-first-column) * -1);
  }
  main {
  width: inherit;
}
form#search.show {
  top: 0.5rem;
}
form#search {
    position: absolute;
    top: -2.5rem;
    left: 0;
    width: 100%;
    transition: top 0.15s ease-out;
  }
  form#search > div {
  position: relative;
  margin-left: 10px;
}
<div id="wrapper">
        <!-- Full container grid -->

        <header class="flex">
            <div class="brand flex">
                <img src="./images/logo-cp-admin.png" alt="" class="">
            </div>
            
            <div class="flex">
                
                <!-- search bar -->
                <form id="search" action="#" method="get">
                    <div class=" align-top">
                        <input id="searchbar" type="search" placeholder=" "
                            class="text-xs focus:outline-none bg-bgSearchBar/[.0] focus:bg-bgSearchBar/50 text-white p-1.5  pl-3 pr-6 my-0.5 rounded-xl">
                        <label for="searchbar">Busca...</label>
                        <span class="mdi mdi-magnify"></span>
                    </div>
                </form>

            </div>
            <!-- mobile responsive -->
            <div class="mininav flex" >
                <label class="searchbar mdi mdi-magnify">MAGNIFY</label>
                <label class="nav mdi mdi-menu">HAM-MENU
            </div>
        </header>

        <div class="flex col-span2">
            <!-- side content (menu & widgets)-->
            <aside>
              side
            </aside>
            <main>
            main
            </main>
            </div>
            
Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
В чем разница между Promise и Observable?
В чем разница между Promise и Observable?
Разберитесь в этом вопросе, и вы значительно повысите уровень своей компетенции.
Сравнение структур данных: Массивы и объекты в Javascript
Сравнение структур данных: Массивы и объекты в Javascript
Итак, вы изучили основы JavaScript и хотите перейти к изучению структур данных. Мотивация для изучения/понимания Структур данных может быть разной,...
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Прошлая статья была первой из цикла статей о создании системы электронной коммерции с использованием Keystone.js, и она была посвящена главным образом...
Приложение для отслеживания бюджета на React js для начинающих
Приложение для отслеживания бюджета на React js для начинающих
Обучение на практике - это проверенная тема для достижения успеха в любой области. Если вы знаете контекст фразы "Практика делает человека...
Стоит ли использовать React в 2022 году?
Стоит ли использовать React в 2022 году?
В 2022 году мы все слышим о трендах фронтенда (React, Vue), но мы не знаем, почему мы должны использовать эти фреймворки, когда их использовать, а...
2
0
31
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Две вещи нужно было изменить.

Во-первых, нужно изменить функцию closeItems(), чтобы она принимала событие и игнорировала клики в строке поиска.

Во-вторых, в правиле #wrapper.show::before не должно быть z-index: 2, из-за которого панель поиска появлялась под элементом ::before, и на нее нельзя было нажать.

const responsiveIcons = document.querySelectorAll('.mininav>*');
const wrapper = document.querySelector('#wrapper');
const mainNav = document.querySelector('aside');
const searchBar = document.querySelector('form#search');

function openItem(e){
    e.classList.add('show');
    wrapper.classList.add('show');
}

function closeItems(e){
    if(e.target.id == 'searchbar')
        return;
    switch(true){
        case mainNav.classList.contains('show'):
            mainNav.classList.remove('show');
            break;
        case searchBar.classList.contains('show'):
            searchBar.classList.remove('show');
            break;
    }
    wrapper.classList.remove('show');
}

function showSelector(e){
    const eClass = e.target.classList;

    switch(true){
        case eClass.contains('nav'):
            openItem(mainNav);
            break;
        case eClass.contains('searchbar'):
            openItem(searchBar);
            break;
    }

    // if(e.target.classList.contains('nav')){
    //     openItem(mainNav);
    // } else if{}
}
wrapper.addEventListener('click', closeItems, {capture: true});
responsiveIcons.forEach(e => e.addEventListener('click', showSelector));
:root {
  --font-family: "Ubuntu", sans-serif;
  --font-size: 16px;
  --title-color: rgb(58, 58, 58);
  --background-color: white;
  --bgHeader: #003459;
  --bgSearchBar: #002a45;
  --headers: #003459;
  --bgMain: #EBF9FF;
  --textColor: #00171F;
  --cardGreen: rgba(157, 255, 0, 1);
  --cardBlue: rgba(0, 174, 255, 1);
  --cardRed: rgba(255, 42, 42, 1);
  --cardYellow: rgba(255, 251, 0, 1);
  --headerMargin: .5rem 0;
  --box-shadow: 0 1rem 1rem -0.75rem rgb(105 96 215 / 18%);
  --wrap-first-column: 14rem;
  --nav-txt-color: #5c5c5c;
}
#wrapper {
  display: grid;
  grid-template-columns: min-content 1fr;
  grid-template-rows: min-content 1fr;
  background-color: var(--bgMain);
  min-height: 100%;
}
#wrapper.show::before {
  content: "";
  position: fixed;
  background-color: black;
  opacity: 0.5;
  width: 100%;
  height: 100%;
}
header {
  grid-column: span 2;
  column-span: all;
  background: var(--bgHeader);
  justify-content: space-between;
}

.brand {
  height: fit-content;
  width: 12.5rem;
  align-items: center;
  margin: var(--headerMargin);
}

header > div + div {
  height: fit-content;
  width: auto;
  align-items: center;
  margin: var(--headerMargin);
  margin: auto 0.5rem;
}

.mininav {
  color: white;
  width: max-content;
  display: inline-block;
  flex-direction: row;
  flex-wrap: nowrap;
}
aside.show {
  left: 0;
}
aside {
    inset: 0 auto;
    position: absolute;
    top: 0;
    left: calc(var(--wrap-first-column) * -1);
  }
  main {
  width: inherit;
}
form#search.show {
  top: 0.5rem;
}
form#search {
    position: absolute;
    top: -2.5rem;
    left: 0;
    width: 100%;
    transition: top 0.15s ease-out;
  }
  form#search > div {
  position: relative;
  margin-left: 10px;
}
<div id="wrapper">
        <!-- Full container grid -->

        <header class="flex">
            <div class="brand flex">
                <img src="./images/logo-cp-admin.png" alt="" class="">
            </div>
            
            <div class="flex">
                
                <!-- search bar -->
                <form id="search" action="#" method="get">
                    <div class=" align-top">
                        <input id="searchbar" type="search" placeholder=" "
                            class="text-xs focus:outline-none bg-bgSearchBar/[.0] focus:bg-bgSearchBar/50 text-white p-1.5  pl-3 pr-6 my-0.5 rounded-xl">
                        <label for="searchbar">Busca...</label>
                        <span class="mdi mdi-magnify"></span>
                    </div>
                </form>

            </div>
            <!-- mobile responsive -->
            <div class="mininav flex" >
                <label class="searchbar mdi mdi-magnify">MAGNIFY</label>
                <label class="nav mdi mdi-menu">HAM-MENU
            </div>
        </header>

        <div class="flex col-span2">
            <!-- side content (menu & widgets)-->
            <aside>
              side
            </aside>
            <main>
            main
            </main>
            </div>
            

О, спасибо... Я немного изменил его на if(e.target.id != "wrapper"), так что он работает отлично. Спасибо. Я думал о каком-то варианте eventlistner, которого еще не нашел. в любом случае, спасибо

asaks- 17.05.2022 19:50

Другие вопросы по теме