Обработчик длительного нажатия на кнопку jQuery

Примеры jQuery-обработчиков для долгих нажатий на кнопки, ссылки и другие элементы.

1

В данном примере при обычном нажатии на кнопку сработает действие №1. Если кнопка была жата более одой секунды, то единоразово (с помощью setTimeout) сработает действие №2.

<button id="button" type="button">Кнопка</button>

<script>
$("#button").click(function(){
	/* Действие №1 (при обычном клике) */
}).mouseup(function(){
	clearTimeout(pressTimer);
	return false;
}).mousedown(function(){
	pressTimer = window.setTimeout(function(){
		/* Действие №2 (при долгом нажатии) */
	}, 1000);
	return false;
});
</script>
JS

Пример в действии:

2

Во втором примере при обычном нажатии на кнопку сработает действие №1. Если кнопка была жата, то действие №2 сработает циклично, с периодом указанным в setInterval() (100 мс).

<button id="button" type="button">Кнопка</button>

<script>
var pressTimer;

$("#button").click(function(){
	/* Действие №1 (при обычном клике) */
}).mouseup(function(){
	clearTimeout(pressTimer);
	return false;
}).mousedown(function(){
	pressTimer = window.setInterval(function() {
		/* Действие №2 (при долгом нажатии) */
	}, 100);
	return false;
}).mouseout(function(){
	clearTimeout(pressTimer);
});
</script>
HTML

Пример в действии:

17.11.2022, обновлено 22.12.2022
2885

Комментарии

, чтобы добавить комментарий.

Другие публикации

Стилизация кнопок CSS
Стилизация ссылок и кнопок на примере разных сайтов с поддержкой разными состояний – наведение курсора, нажатие, попадание в фокус и заблокированное состояние элемента.
74013
-1
Селекторы JQuery
В jQuery, селекторы в основном позаимствованы из CSS 1-3, также добавлены свои, что дало хороший набор инструментов для манипуляций с элементами в документе.
16733
+12
Дополнительные кнопки кнопки «+/-» в Jquery UI sortable
Если у ползунка Jquery UI Sortable задан очень мелкий шаг (свойство step), то становится не удобно выбирать точное...
1433
0
Графический редактор на Canvas и JS + PHP
Пример редактора тапа «Paint» с картинкой-подложкой, на которой можно рисовать мышью с последующей отправкой на сервер.
8783
+2
Перетаскивание элементов Drag and drop (jQuery UI Droppable)
UI Droppable – плагин, который позволяет сделать перетаскивание элементов мышью (Drag&Drop).
10087
0
Как изменить Favicon сайта из JavaScript
Для замены Favicon во вкладке браузера достаточно у элемента link rel="icon" в атрибуте href указать путь до нового...
13455
+1