Отработка нажатие на элемент

@AD86 · Регистрация: 14.05.2015

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

Добрый день есть такая проблема.Есть div.

HTML5
1
2
3
4
 <div class="color-item color_backgr-prev" id="color_backgr-prev">
                <div id="color_pref"></div>
                <div id="color">Prev color</div>
            </div>

Хочу сделать обработку события при нажатие на полностью родитесльский div. Но у меня отрабатывает нажатие только color_pref.

JavaScript
1
2
3
4
5
 document.querySelectorAll('.color-item').forEach((element) => {
        })
        switch (event.target.id) {
            case ('colors_pref'):
                break;

Подскажите как сделать что бы при нажатие полностью на родительский div : color_backgr-prev срабатывало нажатие

@mrtoxas · 10.12.2019, 11:07

Если я правильно понял, тогда методом closest() ищите нужного родителя при клике на элемент

JavaScript
1
event.target.closest('.color-item')

@AD86 · 10.12.2019, 11:24 **[ТС]**

Нет немножко вы меня не так поняли. у меня есть div элемент к примеру размером 20px на 100px в нем етсь два еще div элемента. id первого элемента тоетсь родителя color_backgr-prev. и я хочу что быпри нажатие на этот div у меня происходило событие. А счас у меня происходит событие при нажатие на color_pref

@shvyrevvg · 10.12.2019, 11:36

AD86,

JavaScript
1
2
3
if (e.target.classList.contains('color_backgr-prev') {
 
}

Добавлено через 2 минуты
AD86, в общем, проверяйте e.target.

@amr-now · 10.12.2019, 12:46

Добрый день.

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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
</head>
<body>
    <div class="color-item color_backgr-prev" id="color_backgr-prev">
        <div id="color_pref">color_pref</div>
        <div id="color">color</div>
        color_backgr-prev
    </div>
    <script>
        for (let element of document.querySelectorAll('.color-item'))
            element.addEventListener("click", colorItem_click);
 
        function colorItem_click(e) {
            if (this !== e.target) return;
 
            console.dir(this); // Какие-то действия
        }
    </script>
</body>
</html>

Новые блоги и статьи Все статьи Все блоги /
Настройки 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. Задача: запретить редактирование документа, если он открыт у другого пользователя. / / . . .

@AD86 0 / 0 / 0 Регистрация: 14.05.2015 Сообщений: 59
	10.12.2019, 11:24 [ТС]
	Нет немножко вы меня не так поняли. у меня есть div элемент к примеру размером 20px на 100px в нем етсь два еще div элемента. id первого элемента тоетсь родителя color_backgr-prev. и я хочу что быпри нажатие на этот div у меня происходило событие. А счас у меня происходит событие при нажатие на color_pref 0