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

Тема: Підкажіть чому 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

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

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

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

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

4

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

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

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

6

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

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

7

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

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

8

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

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

FakiNyan написав:

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

9

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

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