@Davidaa_WoW

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

У мне в кнопку встроен input и div, понятно, что в input пользователь что-то вводит, а у div-а по нажатию уже своё событие.
На основную кнопку настроено как раз событие скрытия и отображения дочерних элементов. Однако при клике на input выполняется событие нажатия кнопки, как и при клике на div. Как этого избежать?
<button class="button-third" onclick="loopAppend()">
              <input type="text" class="input-third" />
              <div class="x" onclick="clearInput()">X</div>
            </button>
  • Вопрос задан
  • 99 просмотров
Решения вопроса 1
@L1nks
Немного странная структура html.
Если вам надо, чтобы у вас была кнопка, которая чистит значение в инпут и при этом сам инпут был внутри этой кнопки, то лучше сделать так
<button class="button-third">
  <input type="text" class="input-third" />
  X
</button>


document.querySelector(".button-third").addEventListener("click", (evt) => {
	console.log("button click")
});

document.querySelector(".input-third").addEventListener("click", (evt) => {
	evt.stopPropagation();
	console.log("input click")
});


Чтобы события с дочернего элемента не поднимались вверх и не вызывали родительские, вам необходимо использовать stopPropagation()
Документация: тык
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
Alex_mos
@Alex_mos
Google всему голова
Может стоить разделить, кнопку отдельно а инпут с дивом отдельной. Не вкладывать их друг в друга
Ответ написан
Комментировать
@Shatge
Веб-разработчик
На дочерний элемент можно повесить preventDefault()
https://developer.mozilla.org/ru/docs/Web/API/Even...
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы