Только для читателей Lifeexample возможно открыть интернет-магазин на Moguta.CMS со скидкой в 15%

<<< iMacros: команды, скрипты, примеры || Javascript классы >>>

Событие mousePress на JavaScript и jQuery

29.01.2013
Событие 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 выглядит таким образом:

  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 минут пока счетчик накрутит 10000.

Скачать исходник примера. ( Скачали: 1104 чел. ) 

Надеюсь, данный материал по эмулированию mousepress на JavaScript поможет вам в реализации собственных задач.

Чтобы не пропустить публикацию следующей статьи подписывайтесь на рассылку по E-mail или RSS ленту блога.

Нравится

Комментарии

  • anton

    спасибо-спасибо-спасибо!!!!

  • Константин

    Большое спасибо! =) Все просто и доходчиво!

  • Константин

    Пришла такая же мысль о реализации, когда столкнулся с этой проблемой, но не подумал о возможности ухода мыши с элемента при нажатой клавише. За мысль c mouseleave и флажком — отдельное спасибо!)

  • Александр

    Очень нужен был такой код …
    Благодарю Вас !!!
    Очень помог ! )))

  • Алексей

    Mousemove — это перемещение мыши

  • Оставить комментарий

    Подписаться на комментарии к этой статье по RSS

    Размещение статей и контекстных ссылок
    Яндекс.Метрика