sfauquant
commented
5 years ago 5 years later and I'm getting the issue too. It seems to be due to the fact that my app (ANDROID CORDOVA, on Samsung Android 5.1.1) detected the mousedown, mousemove and mouseup events at the same time when I upped my finger from the screen, even though no mouse device was attached to it.
I managed to make it work by adding this script in the bottom of my page :
var getPointerEvent = function (event) {
return event.originalEvent.targetTouches ? event.originalEvent.targetTouches[0] : event;
};
var $touchArea = $('body'),
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;
console.log('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
console.log('Tap');
}
}, 200);
});
$touchArea.on('touchend mouseup touchcancel', function (e) {
e.preventDefault();
// here we can consider finished the touch event
touchStarted = false;
console.log('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
console.log('Swiping');
}
});
I have no idea why it works though.
The signature area doesn't seem to allow moving the cursor. It will only add a point if you click and release immediately. This is in Chrome 39, works fine in Firefox. Any ideas on how I can debug this?