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

by Denis Tverdokhlebov

HTML

<h2>Событие mousePress на JavaScript и jQuery</h2>
<p>Здравствуйте, уважаемые читатели блога LifeExample.Столкнулся я на днях с одной элементарной задачей. Нужно было написать JavaScript, который бы увеличивал число в поле ввода, пока пользователь зажал кнопку мыши и держит ее. Другими словами, на странице имеется input со значением равным 0, рядом с инпутом расположен любой элемент, ну например кнопка с надписью "увеличить", когда нажимаем на "увеличить" число в инпуте увеличивается на +1 пока не отпустили кнопку мышки.</p>
<p>Наверняка 90% читателей сейчас подумало о том, нужно использовать onclick или просто click если это jQuery. К сожалению это не так, навесив на элемент событие click, оно выполнится лишь единожды при нажатии, а нужно выполнять действие, пока кнопка нажата без перерыва.</p>
<p><span>Как выяснилось в ходе изучения задачи, JavaScript предоставляет нам методы:</span></p>
<ul>
  <li><span>Mousemove</span> - нажатие на кнопку мыши;</li>
  <li><span>Mousedown</span> - нажатие на кнопку мыши;</li>
  <li><span>Mouseup</span> - нажатая кнопка мыши отпущена;</li>
  <li><span>Mouseleave</span> – курсор покинул область объекта, либо фокус снялся;</li>
  <li><span>Click</span> - клик мыши;</li>
  <li><span>Dblclick</span> - двойной клик;</li>
  <li><span>Contextmenu</span> – контекстное меню.</li>
</ul>
<p>Но среди доступных событий в JavaScript нет ничего похожего на <span class="bold">mousepress</span> или <span class="bold">mousepressed</span>. Поэтому суть задачи сводится к эмулированию события <span class="bold">mousepress</span>. По большому счету сделать это не сложно, так как мы можем отловить момент, когда пользователь нажал на кнопку и когда ее отпустил.</p>
<p>Для этого используем имеющиеся события Mousedown, Mouseup, Mouseleave и Settimeout.</p>
<h2>Алгоритм для события Mousepress на JavaScript</h2>
<p>Алгоритм эмулирования события mousepress на JavaScript с использованием jQuery выглядит таким образом:</p>
<ul>
  <li>При нажатии на кнопку...

CSS

body {
  margin: 10px 20px;
  padding: 10px 0 0 0;
}
h2 {
  font-size: 22px;
  color: purple;
  padding: 10px 0;
}
p {
  font-size: 18px;
  text-align: justify;
  margin: 20px 0;
}
p span {
  font-style: italic;
}
p span.bold {
  font-weight: bold;
  font-style: normal;
}
p a {
  color: pink;
}
ul {
  margin: 0 20px;
}
ul li {
  list-style-type: circle;
}
ul li span{
  font-weight: bold;
}