jQuery-FastClick
μ€μΉλ°©λ²
bower install jquery-fastclick
μ¬μ©λ°©λ²
FastClick μ΄λ²€νΈ
fastclick μ΄λΌλ μ΄λ²€νΈλͺ μ μ¬μ©νλ κ²λ§μΌλ‘ κ°λ¨νκ² μ¬μ© ν μ μμ΅λλ€.
$('#id').on('fastclick', function(evt) {
});μ΄λ²€νΈ Delegation μλ νμ© ν μ μμ΅λλ€.
$(document).on('fastclick', 'div', function(evt) {
});fastclick μ΄λ²€νΈμ΄ preventDefault ν¨μλ₯Ό νΈμΆνλ©΄ click μ΄λ²€νΈκ° μ€λ¨λ©λλ€.
$('a[href]').on('fastclick', function(evt) {
evt.preventDefault();
});μ°μμΌλ‘ fastclick μ νλμ§ μ μ μλλ‘ μ°μ λ°μ νμλ₯Ό μ»μ μ μμ΅λλ€.
$('#id').on('fastclick', function(evt) {
switch (evt.detail) {
case 2:
console.log('double taps');
break;
case 3:
console.log('triple taps');
break;
}
});μ°μ fastclick μΈμ§ νλ¨ν μ μλ interval λ₯Ό μ§μ ν μ μμ΅λλ€.
jQuery.fastClick.consecutiveInterval = 100; // default: 500TapHold μ΄λ²€νΈ
μΆκ°λ‘ taphold μ΄λ²€νΈλ μ 곡νκ³ μμ΅λλ€.
$('button').on('taphold', function(evt) {
});TapHold μΈμ§μ μ¬μ©λλ duration μ μ§μ ν μ μμ΅λλ€.
jQuery.fastClick.tapHoldDuration = 500; // default: 1000κΈ°ν κΈ°λ₯λ€
fastclick κ°λ₯ν μ리먼νΈκ° active μνκ° λμμλ νΉμ ν CSS ν΄λμ€λͺ μ΄ μΆκ°λλλ‘ μ€μ μ ν΅ν΄ μ§μ ν μ μμ΅λλ€.
button { border-style:outset; }
button.actived { border-style:inset; }jQuery.fastClick.activedClassName = 'actived'; // default: 'actived'
jQuery.fastClick.activableSelector = 'button'; // default: 'button a'Installation
bower install jquery-fastclick
Usage
FastClick event
You can use fastclick event if you just replace event name with fastclick.
$('#id').on('fastclick', function(evt) {
});You can also use with event delegation.
$(document).on('fastclick', 'div', function(evt) {
});If you call preventDefault of fastclick, the click event will be prevented.
$('a[href]').on('fastclick', function(evt) {
evt.preventDefault();
});You can get a count of consecutive fast-clicks that happened in a short interval.
$('#id').on('fastclick', function(evt) {
switch (evt.detail) {
case 2:
console.log('double taps');
break;
case 3:
console.log('triple taps');
break;
}
});Change the interval be used to detect whether is consecutive or not.
jQuery.fastClick.config.consecutiveInterval = 100; // default: 500TapHold event
In addition, jQuery-FastClick implements taphold event.
$('button').on('taphold', function(evt) {
});Set the duration of tap-hold.
jQuery.fastClick.config.tapHoldDuration = 500; // default: 1000Other functions
When the fast-clickable elements are actived, the elements can have specific CSS className. And you can configure about that.
button { border-style:outset; }
button.actived { border-style:inset; }jQuery.fastClick.config.activedClassName = 'actived'; // default: 'actived'
jQuery.fastClick.config.activableSelector = 'button'; // default: 'button a'