Мне нужно создать функциональность для обработки длительных нажатий на различные элементы страницы. Хочу чтобы когда пользователь нажимает и удерживает кнопку отправки формы или ссылку определенное время, то срабатывала специальная функция.
Важное условие - нужно реализовать это без использования jQuery, только на чистом JavaScript. Подскажите как это можно сделать?
Вот примерная структура того что я хочу получить:
function startHoldTimer() {
// здесь должен запускаться таймер
}
function executeAfterHold() {
// эта функция должна выполниться через определенное время
}
Тут всё просто - setTimeout плюс события мыши. На mousedown запускаешь таймер, на mouseup убираешь. Не забудь про mouseleave, иначе будет глючить когда курсор съезжает с элемента. Делаю задержку 800мс - норм скорость. И обязательно preventDefault(), чтоб стандартные действия не мешались.
А что с contextmenu? Его тоже блокируй через preventDefault, а то правая кнопка будет показывать меню. И если элемент фокусируемый - добавь keydown/keyup для Enter и Space, чтобы с клавиатуры работать было удобно.
Добавь touchstart и touchend для мобилок, иначе только мышь будет работать. У меня было похожее - делал через let timer = null, в mousedown ставлю timer = setTimeout(() => { твоя функция }, 1000), в mouseup делаю clearTimeout(timer). Главное проверить что timer не null перед очисткой. Ещё можно добавить визуалку - прогресс бар или цвет кнопки меняется пока держишь.
По опыту скажу - лучше делать задержку через переменную, а не хардкодить. Иногда для разных элементов нужно разное время. Делаю объект с настройками: holdDelay, потом просто передаю в функцию. Еще момент - если у тебя SPA, не забудь удалять слушатели при смене компонентов, иначе будут висеть в памяти. И проверь что будет при быстрых кликах - таймеры могут накапливаться.