Как правильно задать событие по клику по элементу со вложенными элементами?

@Vladd117 · Регистрация: 27.04.2020

Студворк — интернет-сервис помощи студентам

Здравствуйте.

На сайте контент заполняется карточками с продуктами из базы данных. Каждая карточка (див) содержит вложенные дивы: изображение и название продукта. Стоит задача: при клике на карточке развернуть описание продукта. Все, в принципе, работает, но... столкнулся с такой проблемой:
При клике на изображение или название клик не срабатывает.
Я понимаю, что, например, при клике на изображение event.target - это и есть то самое изображение.
Такой вопрос: может существует способ сделать так, чтобы вложенные дивы игнорировались, а событие срабатывало на всей карточке?
На всякий случай код:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
 prodlist.addEventListener('click', function(event) {
            let target = event.target;
            if (target && target.classList.contains('product')) {
                for (let i = 0; i < product.length; i++) {
                    if (target == product[i]) {
                        hideProdContent(0);
                        showProdContent(i);
                        break;
                    }
                }
            }
 
        }, true);

Заранее благодарю!

@amr-now · 30.04.2020, 09:53

Здравствуйте.
Заранее пожалуйста.
Вот так можно вытащить карточку товара, если обработчик события навешен на список товаров:

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        #prodList {
            display: flex;
        }
 
        .product {
            height: 100px;
            width: 100px;
            border: 1px solid black;
        }
 
        .img,
        .description {
            height: 40px;
            border: 1px solid blue;
        }
    </style>
</head>
<body>
    <div id="prodList">
        <div class="product">
            <div class="img"></div>
            <div class="description">Гречка</div>
        </div>
        <div class="product">
            <div class="img"></div>
            <div class="description">Туалетная бумага</div>
        </div>
        <div class="product">
            <div class="img"></div>
            <div class="description">Макароны</div>
        </div>
    </div>
    <script>
        let prodlist = document.getElementById("prodList");
 
        prodlist.addEventListener('click', event => {
            let product = event.target.closest(".product");
            if (!product) return;
            alert(product.querySelector(".description").textContent);
        });
    </script>
</body>
</html>

@Vladd117 · 30.04.2020, 10:34 **[ТС]**

Огромное спасибо, все заработало как надо.
Понятие не имел про closest. Все перерыл, нигде не встречал... может не везло.
До этого навешивал обработчик на каждый элемент, клик иногда вообще срабатывал, если элемент в самом конце. Понимал, что есть какое-то правильное решение.

@DrType · 30.04.2020, 11:31

Сообщение от Vladd117

...может не везло.

https://learn.javascript.ru/event-delegation , например.

@amr-now · 30.04.2020, 11:38

DrType, closest - относительно свежий метод, пришедший из jQuery. Но были и полифиллы.
Там в принципе алгоритм был понятный, явно не два часа ломать голову.

Добавлено через 2 минуты
DrType, в учебнике не true hidden:

JavaScript
1
elem.hidden = !elem.hidden;

Так лучше не делать.

Новые блоги и статьи Все статьи Все блоги /
Настройки VS Code Loafer 13.04.2026 { "cmake. configureOnOpen": false, "diffEditor. ignoreTrimWhitespace": true, "editor. guides. bracketPairs": "active", "extensions. ignoreRecommendations": true, . . .	Оптимизация кода на разграничение прав доступа к элементам формы Maks 13.04.2026 Алгоритм из решения ниже реализован на нетиповом документе, разработанного в конфигурации КА2. Задачи, как таковой, поставлено не было, проделанное ниже исключительно моя инициатива. Было так:. . .	Контроль заполнения и очистка дат в зависимости от значения перечислений Maks 12.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: реализовать контроль корректности заполнения дат назначения. . .	Архитектура слоя интернета для сервера-слоя. Hrethgir 11.04.2026 В продолжение https:/ / www. cyberforum. ru/ blogs/ 223907/ 10860. html Знаешь что я подумал? Раз мы все источники пишем в голове ветки, то ничего не мешает добавить в голову такой источник, который сам. . .
Подстановка значения реквизита справочника в табличную часть документа Maks 10.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: при выборе сотрудника (справочник Сотрудники) в ТЧ документа. . .	Очистка реквизитов документа при копировании Maks 09.04.2026 Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .	модель ЗдравоСохранения 8. Подготовка к разному выполнению заданий anaschu 08.04.2026 https:/ / github. com/ shumilovas/ med2. git main ветка * содержимое блока дэлэй из старой модели теперь внутри зайца новой модели 8ATzM_2aurI	Блокировка документа от изменений, если он открыт у другого пользователя Maks 08.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в конфигурации КА2. Задача: запретить редактирование документа, если он открыт у другого пользователя. / / . . .

@Vladd117 0 / 0 / 0 Регистрация: 27.04.2020 Сообщений: 4
	30.04.2020, 10:34 [ТС]
	Огромное спасибо, все заработало как надо. Понятие не имел про closest. Все перерыл, нигде не встречал... может не везло. До этого навешивал обработчик на каждый элемент, клик иногда вообще срабатывал, если элемент в самом конце. Понимал, что есть какое-то правильное решение. 0

Как правильно задать событие по клику по элементу со вложенными элементами?

Решение