1 Тема від asdwhitefox Востаннє редагувалося asdwhitefox (21.01.2018 19:12:08)

  • asdwhitefox
  • Користувач
  • Поза форумом
  • Дата реєстрації: 21.01.2018
  • Повідомлень: 13
    • Репутація: 0

Тема: Підкажіть чому onClick спрацьовує на блоках, на які я не вказав дію.

При натисканні на кнопку display none змінюється на flex.
Розгортається блок, в середині якого інші елементи.
По ідеї блок Form це фоновий блок, при натисканні на який вся форма повинна згортатись.
Але з внутрішніми блоками можна було б працювати.
В моєму ж випадку при натисканні на внутрішній блок FormBox спрацьовує onClick з Form.
Підкажіть будьласка в чому моя помилка.
Бібліотека React
html:
<div className="Form" onClick={this.AddApp}>
        <div className="FormBox"></div>
        </div>

js:
  AddApp(){
        var a = document.querySelector(".Form").style.display;
        if(a=="flex"){document.querySelector(".Form").style.display="none"}
        else {document.querySelector(".Form").style.display="flex"}
       
    };

2 Відповідь від Altair8800

  • Altair8800
  • Користувач
  • Поза форумом
  • Дата реєстрації: 26.12.2017
  • Повідомлень: 53
    • Репутація: 35

Re: Підкажіть чому onClick спрацьовує на блоках, на які я не вказав дію.

Тому що FormBox всередині батьківського об'єкту, на якому повішена подія onClick, яка спрацьовує на всьому його контенті.
Зробіть щось типу такого:

<div onClick={this.AddApp}>Toggle Collapse</div>
<div className="Form">
        <div className="FormBox"></div>
        </div>

І не пишіть такі кощунства з селекторами. Використовуйте toogle, на крайній випадок атрибут style зі станом this.state.YourValName, яке підставлятиме потрібне значення.

3 Відповідь від FakiNyan

  • FakiNyan
  • FakiNyan
  • Робітниця.
  • Поза форумом
  • Дата реєстрації: 27.06.2013
  • Повідомлень: 14 116
    • Репутація: 5674

Re: Підкажіть чому onClick спрацьовує на блоках, на які я не вказав дію.

івент "булькає" до верху
https://javascript.info/bubbling-and-capturing

Подякували: 221VOLT1

4 Відповідь від asdwhitefox

  • asdwhitefox
  • Користувач
  • Поза форумом
  • Дата реєстрації: 21.01.2018
  • Повідомлень: 13
    • Репутація: 0

Re: Підкажіть чому onClick спрацьовує на блоках, на які я не вказав дію.

Дякую, але це не те що мені потрібно. Я не хочу робити кнопку для закриття ні в формі ні де інде.
Я хочу зробити, щоб при натисканні на прозору область блок закривався.
І я розумію що можна обьеднати декілька блоків з однією дією, по типу з верху з низу і по бокам цього блоку.
Але не хочется робити Франкенштейна.

ось css:

.Form{
    width: 100vw;
    height: 100vh;
    position: absolute;
    background-color: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
}
.FormBox{
   width:700px;
    height: 400px;
    background-color: rebeccapurple;
   
}




Altair8800 написав:

Тому що FormBox всередині батьківського об'єкту, на якому повішена подія onClick, яка спрацьовує на всьому його контенті.
Зробіть щось типу такого:

<div onClick={this.AddApp}>Toggle Collapse</div>
<div className="Form">
        <div className="FormBox"></div>
        </div>

І не пишіть такі кощунства з селекторами. Використовуйте toogle, на крайній випадок атрибут style зі станом this.state.YourValName, яке підставлятиме потрібне значення.

5 Відповідь від Altair8800

  • Altair8800
  • Користувач
  • Поза форумом
  • Дата реєстрації: 26.12.2017
  • Повідомлень: 53
    • Репутація: 35

Re: Підкажіть чому onClick спрацьовує на блоках, на які я не вказав дію.

Ну зробіть не кнопку, а область.

6 Відповідь від FakiNyan

  • FakiNyan
  • FakiNyan
  • Робітниця.
  • Поза форумом
  • Дата реєстрації: 27.06.2013
  • Повідомлень: 14 116
    • Репутація: 5674

Re: Підкажіть чому onClick спрацьовує на блоках, на які я не вказав дію.

тоді вішайте лістенер на document, і блокуйте бульбашкування, після натиснення на хворму

7 Відповідь від asdwhitefox

  • asdwhitefox
  • Користувач
  • Поза форумом
  • Дата реєстрації: 21.01.2018
  • Повідомлень: 13
    • Репутація: 0

Re: Підкажіть чому onClick спрацьовує на блоках, на які я не вказав дію.

Області.. Якщо ви подивитесь на css то зрозумієте, що окрім одного центрального блоку вся область пуста. Не хочеться закивати всі вільні області блоками.  Ось і шукаю рішення.
Схоже прийдеться робити два не повязаних одне з одним блоки, з z-index. І накласти один на одного.

8 Відповідь від asdwhitefox

  • asdwhitefox
  • Користувач
  • Поза форумом
  • Дата реєстрації: 21.01.2018
  • Повідомлень: 13
    • Репутація: 0

Re: Підкажіть чому onClick спрацьовує на блоках, на які я не вказав дію.

Хмм, потрібно спробувати. Доречна ідея.

FakiNyan написав:

тоді вішайте лістенер на document, і блокуйте бульбашкування, після натиснення на хворму

9 Відповідь від Tar

  • Tar
  • Користувач
  • Поза форумом
  • Звідки: Львів
  • Дата реєстрації: 27.01.2017
  • Повідомлень: 58
    • Репутація: 44

Re: Підкажіть чому onClick спрацьовує на блоках, на які я не вказав дію.

Можливо спробувати використати event.target.При події визначити event.target перевірити на наявність наприклад класу потрібного вам блоку , якщо клік відбувся на потрібному блоці виконати дію.