Skip to content

Instantly share code, notes, and snippets.

@patrixd
Last active March 27, 2016 22:00
Show Gist options
  • Save patrixd/f7a80ce7545d724d244a to your computer and use it in GitHub Desktop.
Save patrixd/f7a80ce7545d724d244a to your computer and use it in GitHub Desktop.
Touch and Mouse events. For compatibility with any kind of device. Touch, Click and both. https://hacks.mozilla.org/2013/04/detecting-touch-its-the-why-not-the-how/ http://www.html5rocks.com/en/mobile/touchandmouse/
$.fn.pointerEvent = (function () {
var $el = $(this),
_eventData = "",
_touchEventName,
_bindEvent = function (nameListener, mouseEvent, data, callback) {
if ($el.length === 0)
return;
_touchEventName = _getTouchEventName(mouseEvent);
if (_.isFunction(data)) {
callback = data;
data = null;
}
_eventData = data;
if (_touchEventName) {
var touchEventCallback = _saveEventCallbacks(nameListener, mouseEvent, callback).touchHandler;
if (data)
$el[nameListener](_touchEventName, data, touchEventCallback);
else
$el[nameListener](_touchEventName, touchEventCallback);
}
if (data)
$el[nameListener](mouseEvent, data, callback);
else
$el[nameListener](mouseEvent, callback);
},
_onTouchEventDelegator = function ($el, mouseEvent, callback) {
return function (e) {
var eventCallback = _getEventCallback(mouseEvent, callback),
delCallback = eventCallback.touchHandler,
_touchEventName = _getTouchEventName(mouseEvent);
$el.off(mouseEvent, callback);
if(eventCallback.eventListener == "one")
$el.off(_touchEventName, delCallback);
var result = callback(e);
eventCallback = _getEventCallback(mouseEvent, callback);
if (eventCallback && eventCallback.touchHandler == delCallback && eventCallback.eventListener != "one") {
setTimeout(function () { //_.defer no funciona bien en iOS
if (e.data || _eventData)
$el.on(mouseEvent, e.data || _eventData, callback);
else
$el.on(mouseEvent, callback);
}, 1000);
}
return result;
};
},
_getTouchEventName = function (mouseEventName) {
switch(mouseEventName) {
case "mousedown":
case "mouseover":
return "touchstart";
case "mouseup":
return "touchend";
case "mousemove":
return "touchmove";
case "mousecancel":
case "mouseleave":
return "touchcancel";
case "click":
return "touchend";
default:
return "";
}
},
_saveEventCallbacks = function (nameListener, mouseEvent, callback) {
var touchEventCallback = _onTouchEventDelegator($el, mouseEvent, callback),
savedEventCallbacks = $el.data(mouseEvent + "Callback") || [],
eventCallbacks = { "mainHandler": callback, "touchHandler": touchEventCallback, "eventListener": nameListener };
savedEventCallbacks.push(eventCallbacks);
$el.data(mouseEvent + "Callback", savedEventCallbacks);
return eventCallbacks;
},
_getEventCallbacks = function (mouseEvent) {
return $el.eq(0).data(mouseEvent + "Callback") || [];
},
_getEventCallback = function (mouseEvent, callback) {
var savedEventCallbacks = _getEventCallbacks(mouseEvent);
return _.findWhere(savedEventCallbacks, {"mainHandler": callback});
},
_removeEventCallback = function (mouseEvent, callback) {
var savedEventCallbacks = _getEventCallbacks(mouseEvent),
eventCallback = _getEventCallback(mouseEvent, callback);
savedEventCallbacks = _.without(savedEventCallbacks, eventCallback);
savedEventCallbacks = savedEventCallbacks.length ? savedEventCallbacks : null;
$el.data(mouseEvent + "Callback", savedEventCallbacks);
};
return {
one: function (mouseEvent, data, callback) {
_bindEvent("one", mouseEvent, data, callback);
},
on: function (mouseEvent, data, callback) {
_bindEvent("on", mouseEvent, data, callback);
},
off: function (mouseEvent, data, callback) {
if ($el.length === 0)
return;
_touchEventName = _getTouchEventName(mouseEvent);
if (_.isFunction(data)) {
callback = data;
data = null;
}
var eventCallback = _getEventCallback(mouseEvent, callback);
$el.off(mouseEvent, callback);
if(eventCallback && eventCallback.touchHandler) {
$el.off(_touchEventName, eventCallback.touchHandler);
_removeEventCallback(mouseEvent, callback);
}
}
};
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment