-
-
Save whaleinvasion/59d376c62b841ef77520ca54aa6d70f3 to your computer and use it in GitHub Desktop.
Detecting the ‘Tap’ event on a Mobile touch device using javascript
---
JSFiddle: http://jsfiddle.net/gianlucaguarini/56Szw/light/
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var $touchArea = $('#touchArea'), | |
touchStarted = false, // detect if a touch event is sarted | |
currX = 0, | |
currY = 0, | |
cachedX = 0, | |
cachedY = 0; | |
//setting the events listeners | |
$touchArea.on('touchstart mousedown',function (e){ | |
e.preventDefault(); | |
// caching the current x | |
cachedX = e.pageX; | |
// caching the current y | |
cachedY = e.pageY; | |
// a touch event is detected | |
touchStarted = true; | |
$touchArea.text('Touchstarted'); | |
// detecting if after 200ms the finger is still in the same position | |
setTimeout(function (){ | |
currX = e.pageX; | |
currY = e.pageY; | |
if ((cachedX === currX) && !touchStarted && (cachedY === currY)) { | |
// Here you get the Tap event | |
$touchArea.text('Tap'); | |
} | |
},200); | |
}); | |
$touchArea.on('touchend mouseup touchcancel',function (e){ | |
e.preventDefault(); | |
// here we can consider finished the touch event | |
touchStarted = false; | |
$touchArea.text('Touchended'); | |
}); | |
$touchArea.on('touchmove mousemove',function (e){ | |
e.preventDefault(); | |
if(touchStarted) { | |
// here you are swiping | |
$touchArea.text('Swiping'); | |
} | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment