Почему из-за изменения стилей input в состоянии focus не отрабатывает addEventListener("submit")
В состоянии focus высота поля Message увеличивается. Если нажать кнопку send, пока message в фокусе - событие submit(click тоже) не отработает. При повторном(втором) нажатии - сработает. Такой эффект появляется, если при состоянии фокуса любому полю изменить высоту. И пропадает если убрать изменение высоты.
&_textarea:focus {
height: 90px;
}
Как сделать так, чтобы кнопка работала при первом нажатии? Ссылка на код
Ответы (2 шт):
Чтобы поймать щелчок над кнопкой, при изменение высоты соседних элементов в фокусе, нужно использовать событие mousedown для кнопки. Событие mousedown срабатывает, когда кнопка указывающего устройства (к примеру, мыши) нажата над элементом.
Например:
const btn = document.getElementById("btn");
btn.addEventListener("mousedown", function (event) {
alert("вы попытались нажать кнопку");
})
В данном случае это действительно из-за ухода кнопки из под мышки.
- В момент нажатия кнопки мыши фокус уходит с инпута
- инпут меняет высоту
- кнопка сдвигается
- если курсор мыши не над кнопкой не происходит события
mouseupи, как следствиеclick - из-за этого не происходит отправка формы.
Для решения нужно либо зафиксировать высоту, чтобы при уходе фокуса высота не менялась
либо откладывать выполнение обработчика на какое-то время.