Только для читателей Lifeexample возможно открыть интернет-магазин на Moguta.CMS со скидкой в 15%
Событие mousePress на JavaScript и jQuery
Здравствуйте, уважаемые читатели блога LifeExample.Столкнулся я на днях с одной элементарной задачей. Нужно было написать JavaScript, который бы увеличивал число в поле ввода, пока пользователь зажал кнопку мыши и держит ее. Другими словами, на странице имеется input со значением равным 0, рядом с инпутом расположен любой элемент, ну например кнопка с надписью "увеличить", когда нажимаем на "увеличить" число в инпуте увеличивается на +1 пока не отпустили кнопку мышки.
Демо пример mousepress в javascritp
Наверняка 90% читателей сейчас подумало о том, нужно использовать onclick или просто click если это jQuery. К сожалению это не так, навесив на элемент событие click, оно выполнится лишь единожды при нажатии, а нужно выполнять действие, пока кнопка нажата без перерыва.
Как выяснилось в ходе изучения задачи, JavaScript предоставляет нам методы:
- Mousemove - нажатие на кнопку мыши;
- Mousedown - нажатие на кнопку мыши;
- Mouseup - нажатая кнопка мыши отпущена;
- Mouseleave – курсор покинул область объекта, либо фокус снялся;
- Click - клик мыши;
- Dblclick - двойной клик;
- Contextmenu – контекстное меню.
Но среди доступных событий в JavaScript нет ничего похожего на mousepress или mousepressed. Поэтому суть задачи сводится к эмулированию события mousepress. По большому счету сделать это не сложно, так как мы можем отловить момент, когда пользователь нажал на кнопку и когда ее отпустил.
Для этого используем имеющиеся события Mousedown, Mouseup, Mouseleave и Settimeout.
Алгоритм для события Mousepress на JavaScript
Алгоритм эмулирования события mousepress на JavaScript с использованием jQuery выглядит таким образом:
- При нажатии на кнопку (Button) мыши (Mousedown) устанавливаем флаг (isDown = true).
- Пока флаг (isDown) стоит, выполняем какое либо действие (doAction) с заданным интервалом времени (Settimeout).
- Если кнопка отпущена (Mouseup) сбрасываем флаг (isDown = false).
- Если курсор покидает область кнопки (Button) при этом генерируя событие (Mouseleave) , сбрасываем флаг (isDown = false).
Вот и вся реализация mousepress и mousepressed на jQuery и Javascript.
Благодаря этому алгоритму можно реализовать удобный increment поля ввода. Кстати для еще большего удобства, лучше учесть возможность увеличения шага инкремента со временем нажатия.
Если произошло нажатие на кнопку и пользователь не отпускает ее первые 20 итераций, то шаг увеличится на 10, если после этого прошло еще 10 итераций, то шаг увеличится на 100 и так далее.
Это ускорит процесс выбора нужного числа в поле, т.е. не придется ждать 5 минут пока счетчик накрутит 10000.
Надеюсь, данный материал по эмулированию mousepress на JavaScript поможет вам в реализации собственных задач.
Читайте также похожие статьи:
Чтобы не пропустить публикацию следующей статьи подписывайтесь на рассылку по E-mail или RSS ленту блога.
Комментарии
спасибо-спасибо-спасибо!!!!
Большое спасибо! =) Все просто и доходчиво!
Пришла такая же мысль о реализации, когда столкнулся с этой проблемой, но не подумал о возможности ухода мыши с элемента при нажатой клавише. За мысль c mouseleave и флажком — отдельное спасибо!)
Очень нужен был такой код …
Благодарю Вас !!!
Очень помог ! )))
Mousemove — это перемещение мыши
Как же я давно искал готовое решение)) Спасибо!