I picked up a some code for a JavaScript tap event for touch devices here : GitHub page. Credit to Jørn Kinderås for this code.
My problem is that if I do something like this :
$('.support input').tap(function () {
$(this).click();
});
It doesn't work because this
is referring to DOMWindow
(as I can see by doing a console.log(this)
.
The workaround I have found for now is to change a couple lines in the tap event code. I changed the following :
elem.on('touchend', _bind(function (e) {
endTime = new Date().getTime();
if (!didMove && ((endTime - startTime) < tapCancelTime)) {
callback(e);
}
}, this));
To this:
elem.on('touchend', _bind(function (e) {
endTime = new Date().getTime();
if (!didMove && ((endTime - startTime) < tapCancelTime)) {
elem.onTap = callback;
elem.onTap(e);
}
}, this));
I feel there is probably a better way to do this the the whole elem.onTap = callback;
feels dirty.
Here is the source code from GitHub :
(function ($) {
"use strict"
$.fn.tap = function (callback) {
var version, didMove, tapCancelTime, startTime, endTime, _bind;
version = "1.0.1";
tapCancelTime = 2 * 1000;
_bind = function (fn, me) { return function () { return fn.apply(me, arguments); }; };
return this.each(
function (index, element) {
var elem = $(element);
elem.on('click', function (e) {
e.preventDefault();
});
elem.on('touchstart', _bind(function (e) {
didMove = false;
startTime = new Date().getTime();
}, this));
elem.on('touchmove', _bind(function (e) {
didMove = true;
}, this));
elem.on('touchend', _bind(function (e) {
endTime = new Date().getTime();
if (!didMove && ((endTime - startTime) < tapCancelTime)) {
callback(e);
}
}, this));
elem.on('touchcancel', _bind(function (e) {
callback(e);
}, this));
}
);
};
})(jQuery);