2
Неділя
січ 28

Обробник тривалого натискання кнопки jQuery

UserGGeyv
UserGGeyv
Приклади 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>


Циклічна дія при утриманні кнопки
У другому прикладі при нормальному натисканні на кнопку спрацює дія №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>


Поширити