jquery $.on() and touch event handling odd behavior when using date() - events

Question

In order to implement a "long press" on mobile, I started with a simple event map where touchstart sets a time, touchend sets another and then calculates the difference to see how long the element was pressed. This was my old code:
$('html')
.on({
touchstart : function(e){
g.tt.start = new Date();
},
touchend : function(e){
g.tt.end = new Date();
g.tt.delta = g.tt.end - g.tt.start;
alert(g.tt.delta);
g.tt = {};
}
})
;
but unfortunately...
...every other press kept calculating the difference from the previous touchend to the touchstart. I'm pretty sure there is something basic I'm missing and thus end up over-engineering this (no formal training I'm afraid). Here is my new code:
$('html')
.on({
touchstart : function(e){
g.tt = {};
g.tt.start = new Date();
},
touchend : function(e){
g.tt.end = new Date();
g.tt.delta = g.tt.end - g.tt.start;
if( isNaN(g.tt.delta) == false ) {
alert(g.tt.delta);
}
else {
return false;
}
setTimeout(function(){g.tt = {}; });
}
})
;
Shouldn't there be a much easier way to do this with less clauses? Never mind my funny g.tt variable names.

Answer 1

I'm realizing that I took the wrong approach, and also found a nice plugin:
http://aanandprasad.com/articles/jquery-tappable/

Answer 2

You are timing the difference between two events, so there is no need to use setTimeout, just use closure to share some variables between the two events. This example is taken from this answer:
(function () {
var start, end;
$('html').on({
touchstart : function(e){
start = +new Date(); // get unix-timestamp in milliseconds
},
touchend : function(e){
end = +new Date();
g.tt.delta = end - start;
if( isNaN(g.tt.delta) == false ) {
alert(g.tt.delta);
}
}
});
})();
Here is a demo showing this with mouse events and touch events