Что делать, если div перекрывает событие другого div'a?

Question

[saiasasd]

Здравствуйте. Есть вот такая конструкция:

<div class="block_1">
    <div class="block_2"></div>
</div>

Суть в том, что размеры дочернего элемента больше, чем у родителя, но z-index у block_1 больше, чем у block_2. Я через addEventListener добавляю событие на block_1 (click), но оно срабатывает даже, если кликать на block_2, хотя у block_2 z-index больше. Нужно сделать так, чтобы событие срабатывало только на block_1. Помню, читал что-то про всплытие и погружение, но не уверен, что это здесь нужно. Спасибо за помощь

Comments

[Ankhena]

Не js, но зато очень просто https://developer.mozilla.org/ru/docs/Web/CSS/poin...

p.s. в качестве интерактивных элементов лучше выбирать не div.

[deantek]

e.stopPropagation();

[Mark Lansky]

Ankhena, плохое решение, если например в дочернем элементе есть какой-то текст, который юзер может в теории выделить. или вообще внутри будут интерактивные элементы, откуда мы знаем (мб поэтому он и задал этот вопрос)

[Ankhena]

ZerdoX-x, захочет выделить потенциальный текст под которым находится нечто на что можно кликнуть? Ну предположим.
Но, если что, pointer-events не мешает выделять текст.

[Mark Lansky]

Ankhena, ага, и правда. но в любом случае для этого кейса есть stopPropagation.

можно представить юзкейс, когда на сайте кликабельный фон, то есть пустое пространство слева и справа от контента (представим, при клике переносит на домашнюю страницу), но весь контент внутри должен оставаться интерактивным (кнопки, плееры и тд).

это я о том, что для решения проблем лучше использовать те инструменты, которые для этого предназначены

[Ankhena]

ZerdoX-x,

можно представить юзкейс, когда на сайте кликабельный фон, то есть пустое пространство слева и справа от контента (представим, при клике переносит на домашнюю страницу), но весь контент внутри должен оставаться интерактивным (кнопки, плееры и тд).

Можно.
Для них есть pointer-events: auto;

это я о том, что для решения проблем лучше использовать те инструменты, которые для этого предназначены

Да, я тоже всегда об этом.
Решение нужно выбирать исходя из всей задачи и окружения. Мы не знаем ни того ни другого.
Pointer-events это всего лишь один из вариантов решения такого рода задач.

Но описание в вопросе сильно хромает, даже в части про то, у кого больше z-index.
Так что, без нормальной песочницы спорить вообще не о чем.

Но вот это оставлю тут для размышлений, раз уж разговор зашел об уместности использования https://css-tricks.com/dangers-stopping-event-prop... Просто на всякий случай, чтобы читающие не ринулись слепо что-то писать.

Answer 1

[Mark Lansky]

Добавь ещё прослушку клика на block_2 и затем вызови event.stopPropagation();

После этого обязательно прочитай эту тему (иначе не сработает)

Answer 2

[Владимир Ясанкин]

в block_1 (click) :
event = event || window.event
var t = event.target || event.srcElement
if t.class=="block_2"
{ }