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

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

В данном примере при обычном нажатии на кнопку сработает действие №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

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

Во втором примере при обычном нажатии на кнопку сработает действие №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
225

Комментарии

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

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

Стилизация кнопок CSS
Стилизация ссылок и кнопок на примере разных сайтов с поддержкой разными состояний – наведение курсора, нажатие, попадание в фокус и заблокированное состояние элемента.
35001
0
Селекторы JQuery
В jQuery, селекторы в основном позаимствованы из CSS 1-3, также добавлены свои, что дало хороший набор инструментов для манипуляций с элементами в документе.
9921
+11
Графический редактор на Canvas и JS + PHP
Пример редактора тапа «Paint» с картинкой-подложкой, на которой можно рисовать мышью с последующей отправкой на сервер.
3846
+3
Перетаскивание элементов Drag and drop (jQuery UI Droppable)
UI Droppable – плагин, который позволяет сделать перетаскивание элементов мышью (Drag&Drop).
3683
+2
Contenteditable – текстовый редактор
Если добавить атрибут contenteditable к элементу, его содержимое становится доступно для редактирования пользователю, а...
31937
+31
Как изменить Favicon сайта из JavaScript
Для замены Favicon во вкладке браузера достаточно у элемента link rel="icon" в атрибуте href указать путь до нового...
7899
+4