Last active
March 27, 2016 22:00
-
-
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/
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
$.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