Last active
August 29, 2015 14:03
-
-
Save hongkheng/f92f482235a782f801c0 to your computer and use it in GitHub Desktop.
Touch event with mousedown fix
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
/** | |
http://www.gianlucaguarini.com/blog/detecting-the-tap-event-on-a-mobile-touch-device-using-javascript/ | |
**/ | |
// jQuery | |
var getPointerEvent = function(event) { | |
return event.originalEvent.targetTouches ? event.originalEvent.targetTouches[0] : event; | |
}; | |
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(); | |
var pointer = getPointerEvent(e); | |
// caching the current x | |
cachedX = currX = pointer.pageX; | |
// caching the current y | |
cachedY = currY = pointer.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 (){ | |
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(); | |
var pointer = getPointerEvent(e); | |
currX = pointer.pageX; | |
currY = pointer.pageY; | |
if(touchStarted) { | |
// here you are swiping | |
$touchArea.text('Swiping'); | |
} | |
}); | |
// non-jQuery | |
// helpers | |
var $ = document.querySelector.bind(document), | |
$$ = document.querySelectorAll.bind(document), | |
getPointerEvent = function(event) { | |
return event.targetTouches ? event.targetTouches[0] : event; | |
}, | |
setListener = function (elm,events,callback) { | |
var eventsArray = events.split(' '), | |
i = eventsArray.length; | |
while(i--){ | |
elm.addEventListener( eventsArray[i], callback, false ); | |
} | |
}; | |
var $touchArea = $('#touchArea'), | |
touchStarted = false, // detect if a touch event is sarted | |
currX = 0, | |
currY = 0, | |
cachedX = 0, | |
cachedY = 0; | |
//setting the events listeners | |
setListener($touchArea,'touchstart mousedown',function (e){ | |
e.preventDefault(); | |
var pointer = getPointerEvent(e); | |
// caching the current x | |
cachedX = currX = pointer.pageX; | |
// caching the current y | |
cachedY = currY = pointer.pageY; | |
// a touch event is detected | |
touchStarted = true; | |
$touchArea.innerHTML = 'Touchstarted'; | |
// detecting if after 200ms the finger is still in the same position | |
setTimeout(function (){ | |
if ((cachedX === currX) && !touchStarted && (cachedY === currY)) { | |
// Here you get the Tap event | |
$touchArea.innerHTML = 'Tap'; | |
} | |
},200); | |
}); | |
setListener($touchArea,'touchend mouseup touchcancel',function (e){ | |
e.preventDefault(); | |
// here we can consider finished the touch event | |
touchStarted = false; | |
$touchArea.innerHTML = 'Touchended'; | |
}); | |
setListener($touchArea,'touchmove mousemove',function (e){ | |
e.preventDefault(); | |
var pointer = getPointerEvent(e); | |
currX = pointer.pageX; | |
currY = pointer.pageY; | |
if(touchStarted) { | |
// here you are swiping | |
$touchArea.innerHTML = 'Swiping'; | |
} | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment