Onclick срабатывает на внутренние элементы

Question

У меня есть div, который открывается с помощью функции на весь экран, а внутри этого div'а есть другой блок, он гораздо меньше.

Примерно так это все выглядит

<div id="close" onclick="close(this);">
    <div id="info">
        ...
    </div>
</div>

.

function close(div){
    div.style.display = 'none';
}

Я хочу, что бы при нажатии на видимую часть div #close он скрывался, но проблема в том, что если я будут нажимать что-то в блоке div #info, он так же скрывается, а мне этого не не нужно, как быть?

Answer 1

Можно сделать так:

document.querySelector('.outer').addEventListener('click', e => {
  if (e.target.classList.contains('outer')) {
    console.log('This is outer div');
  } else {
    console.log('This is smt else')
  }
})

.outer {
  height: 70px;
  width: 70px;
  border: 1px solid black;
}

.inner1,
.inner2 {
  margin-bottom: 5px;
  height: 20px;
  width: 15px;
  border: 1px solid red;
}

<div class="outer">
  <div class="inner1"></div>
  <div class="inner2"></div>
</div>

Answer 2

const open = document.querySelector('#open');
const close = document.querySelector('#close');

open.onclick = () => (close.style.display = 'flex');

close.onclick = function(e) {
    if (!e.target.closest('#info')) this.style.display = 'none';
}

#close {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    background-color: gray;
    display: flex;
    align-items: center;
    justify-content: center;
}

#info {
    width: 40%;
    height: 20%;
    background-color: blue;
}

<button id="open">OPEN</button>

<div id="close">
    <div id="info">
        <button>BUTTON</button>
    </div>
</div>

Answer 3

А как быть, если много div'ов с одинаковым id, я поэтому вешал onclick прямо в div

JSFIDDLE

const buttons = document.querySelectorAll('[data-target-modal]');
const modals = document.querySelectorAll('[data-modal]');

buttons.forEach(button => button.onclick = buttonHandle);
modals.forEach(modal => modal.onclick = modalHandle);

function buttonHandle() {
    this.classList.add('active');
    const findModals = document.querySelectorAll(
        `[data-modal="${this.dataset.targetModal}"]`
    );
    
    if (findModals.length)
        findModals.forEach(modal => modal.classList.add('active'));
}

function modalHandle() {
    this.classList.remove('active');
    const findButtons = document.querySelectorAll(
        `[data-target-modal="${this.dataset.modal}"]`
    );
    
    if (findButtons.length)
        findButtons.forEach(button => button.classList.remove('active'));
}

body {
    background: #20262E;
    padding: 20px;
    font-family: Helvetica;
}

.buttons {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 10px;
}

.buttons button {
    background-color: #fff;
    border: 0;
    padding: 20px;
    outline: none;
    cursor: pointer;
}
.buttons button.active {
    background-color: #e74c3c;
    color: #fff;
}

.modal[data-modal] {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.4);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: visibility 0s 0.5s, opacity 0.5s;
}

.modal[data-modal].active {
    visibility: visible;
    opacity: 1;
    cursor: crosshair;
    transition: visibility 0s, opacity 0.5s;
}

<div class="buttons">
    <button data-target-modal="modal-1">МОДАЛЬНОЕ ОКНО 1</button>
    <button data-target-modal="modal-1">МОДАЛЬНОЕ ОКНО 1</button>
    <button data-target-modal="modal-2">МОДАЛЬНОЕ ОКНО 2</button>
    <button data-target-modal="modal-3">МОДАЛЬНОЕ ОКНО 3</button>
    <button data-target-modal="modal-4">МОДАЛЬНОЕ ОКНО 4</button>
    <button data-target-modal="modal-5">МОДАЛЬНОЕ ОКНО 5</button>
</div>

<div class="modal" data-modal="modal-1"><h1>Модальное окно 1</h1></div>
<div class="modal" data-modal="modal-2"><h1>Модальное окно 2</h1></div>
<div class="modal" data-modal="modal-3"><h1>Модальное окно 3</h1></div>
<div class="modal" data-modal="modal-4"><h1>Модальное окно 4</h1></div>
<div class="modal" data-modal="modal-5"><h1>Модальное окно 5</h1></div>

БЛОГ НА HUSL

Onclick срабатывает на внутренние элементы

Ответы (3 шт):

JSFIDDLE