MousePress на JavaScript і jQuery

jquery

Демо приклад mousepress в javascritp

Напевно 90% читачів зараз подумало про те, чи потрібно використовуватиonclick або простоclick якщо це jQuery. На жаль це не так, навісивши на елементподію click, воно виконається лише один раз при натисканні, а потрібно виконувати дію, поки кнопка натиснута без перерви.

  • Mousemove - натискання кнопки миші;
  • Mousedown - натискання кнопки миші;
  • Mouseup - натиснута кнопка миші відпущена;
  • Mouseleave – курсор залишив область об'єкта, або фокус знявся;
  • Click - клік миші;
  • Dblclick - подвійний клік;
  • Contextmenu – контекстне меню.

Для цього використовуємо наявні події Mousedown, Mouseup, Mouseleave та Settimeout.

  1. При натисканні на кнопку (Button) миші (Mousedown) встановлюємо прапорець (isDown = true).
  2. Поки прапор (isDown) стоїть, виконуємо якусь дію (doAction) із заданим інтервалом часу (Settimeout).
  3. Якщо кнопку відпущено (Mouseup) скидаємо прапор (isDown = false).
  4. Якщо курсор залишає область кнопки (Button) у своїй генеруючи подію (Mouseleave) , скидаємо прапор (isDown = false).

Ось і вся реалізація mousepress і mousepressed на jQuery та Javascript.

Завдяки цьому алгоритму можна реалізувати зручний increment поля введення. До речі, для ще більшої зручності, краще врахувати можливість збільшення кроку інкременту з часом натискання.

Якщо відбулося натискання на кнопку і користувач не відпускає її перші 20 ітерацій, то крок збільшиться на 10, якщо після цього пройшло ще 10 ітерацій, крок збільшиться на 100 і так далі.

Це прискорить процес вибору потрібного числа на полі, тобто. не доведеться чекати 5 хвилин покилічильник накрутить 10 000.