Как сделать так чтобы при клике на p внутри div кликалась только div в JS?

Ссылка скопирована
HTML JavaScript
18 марта 2026 1 ответ

у меня внутри div'a есть параграф , при нажатии на параграф div не отрабатывает свой onclick . Как мне сделать так чтобы и при клике на параграф кликался div ?

Дополнительно:

Это сделает параграф невидимым для мышки

div p {   pointer-events: none; }

div p { pointer-events: none; }

А так вы можете определить по какому элементу сделан клик

document.querySelector('div').addEventListener('click', e => {   console.log(e.currentTarget); // Будет див, даже если кликнули на внутренний элемент });  document.querySelector('div').addEventListener('click', e => {   console.log(e.target.closest('div'));   // Будет НАЙДЕН див, внутри которого, или на нем самом кликнули });

document.querySelector('div').addEventListener('click', e => { console.log(e.currentTarget); // Будет див, даже если кликнули на внутренний элемент }); document.querySelector('div').addEventListener('click', e => { console.log(e.target.closest('div')); // Будет НАЙДЕН див, внутри которого, или на нем самом кликнули });

Нужно решить такую задачу?

Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

Заказать помощь
Лучший ответ
1
Антон С. Ответ

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

внутри элемента

срабатывало только событие клика на самом

, а не на

, можно воспользоваться делегированием событий.

Для этого нужно добавить обработчик событий на элемент

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

, то событие можно остановить, чтобы оно не распространялось дальше.

Пример решения данной проблемы на чистом JavaScript:

const div = document.querySelector('.myDiv');
 
div.addEventListener('click', (event) => {
  if (event.target.tagName === 'P') {
    event.stopPropagation();
    console.log('Clicked on div');
  }
});

const div = document.querySelector('.myDiv'); div.addEventListener('click', (event) => { if (event.target.tagName === 'P') { event.stopPropagation(); console.log('Clicked on div'); } });

В данном коде мы добавляем обработчик событий на элемент

с классом .myDiv. При каждом клике внутри этого элемента, мы проверяем, был ли клик на элементе

. Если да, то мы останавливаем дальнейшее распространение события и выводим сообщение в консоль.

Таким образом, при клике на элемент

внутри

будет срабатывать только обработчик события на самом

, а не на

.

Другие ответы (0)

Пока нет других ответов. Будьте первым, кто поможет автору.

Ответить на вопрос

комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Вам также может быть интересно

Веб-разработка Какие особенности разработки сайтов под тор/даркнет? 1 ответ Веб-разработка Как поправить этот код чтобы можно было обновить данные в бд( при взаимодействии с методом класса в Node.js)? 2 ответов Android Как заменить класс AuthorizationCodeInstalledApp на Android (Google API)? 1 ответ Google Как подтвердить аккаунт Google? 1 ответ