mousePress събитие в JavaScript и jQuery
Демо пример за натискане на мишката в javascript
Със сигурност 90% от читателите сега се замислят дали да използватonclick или простоclick, ако е jQuery. За съжаление това не е така, като окачите събитие click върху елемента, то ще се изпълни само веднъж, когато се щракне, но трябва да извършите действието, докато бутонът е натиснат без прекъсване.
- Mousemove - щракване върху бутона на мишката;
- Mousedown - натискане на бутона на мишката;
- Mouseup - натиснатият бутон на мишката се освобождава;
- Mouseleave – курсорът е напуснал областта на обекта или фокусът е премахнат;
- Щракване - щракване с мишката;
- Dblclick - двойно щракване;
- Contextmenu – контекстно меню.
За да направим това, използваме наличните събития Mousedown, Mouseup, Mouseleave и Settimeout.
- Когато щракнете върху бутона (Button) на мишката (Mousedown), задайте флага (isDown = true).
- Докато флагът (isDown) е включен, ние извършваме някакво действие (doAction) с определен интервал от време (Settimeout).
- Ако бутонът бъде освободен (Mouseup), нулирайте флага (isDown = false).
- Ако курсорът напусне областта на бутона (Button), докато генерира събитие (Mouseleave), нулирайте флага (isDown = false).
Това е цялата реализация на mousepress и mousepressed в jQuery и Javascript.
Благодарение на този алгоритъм можете да приложите удобно увеличение на полето за въвеждане. Между другото, за още по-голямо удобство е по-добре да се вземе предвид възможността за увеличаване на стъпката на нарастване с времето на натискане.
Ако бутонът е натиснат и потребителят не го пусне за първите 20 итерации, тогава стъпката ще се увеличи с 10, ако след това са изминали още 10 итерации, тогава стъпката ще се увеличи със 100 и т.н.
Това ще ускори процеса на избор на желания номер в полето, т.е. не е нужно да чакате още 5 минутиброячът ще навие 10000.