Skip to content

Instantly share code, notes, and snippets.

@beeant
Last active December 26, 2015 09:39
Show Gist options
  • Save beeant/7131396 to your computer and use it in GitHub Desktop.
Save beeant/7131396 to your computer and use it in GitHub Desktop.
re-map mouse to touch event and vice versa
(function () {
var MOVE_THRESHOLD = 20;
// 'tap'イベントをjQueryに登録
$.event.special.tap = {
setup: function() {
var self = $(this);
self.on('touchstart', function(e) {
var moved = false,
origTarget = e.target,
origEvent = e.originalEvent,
origPos = [origEvent.touches[0].pageX, origEvent.touches[0].pageY],
originalType;
// 指が動くかの確認
function touchMoveHandler(e) {
var newPageXY = e.originalEvent.touches[0],
horizontalThreshold = (Math.abs(origPos[0] - newPageXY.pageX) > MOVE_THRESHOLD),
verticalThreshold = (Math.abs(origPos[1] - newPageXY.pageY) > MOVE_THRESHOLD);
if (horizontalThreshold || verticalThreshold) {
moved = true;
}
}
function touchEndHandler(e) {
// cancel move event
self.off('touchmove', origTarget, touchMoveHandler);
// tapイベントを実行する
if (!moved && (origTarget === e.target)) {
originalType = e.type;
e.type = 'tap';
e.pageX = origPos[0];
e.pageY = origPos[1];
$.event.handle.call(self[0], e);
e.type = originalType;
}
}
// イベント登録
self.on('touchmove', touchMoveHandler);
self.one('touchend', touchEndHandler);
});
}
};
return $.fn.extend({
ambTouch: function (event, selector, callback) {
var self = this,
toEvents,
fromEvents,
fromKey,
supportTouch = ('ontouchstart' in window),
touchEvents = ['touchstart', 'touchend', 'touchmove', 'tap'],
mouseEvents = ['mousedown', 'mouseup', 'mousemove', 'click'];
if (typeof selector === 'function') {
callback = selector;
selector = null;
}
if (supportTouch) {
// mouseイベントtouchイベントにする場合(例: touchstart to mousedown)
fromEvents = mouseEvents;
toEvents = touchEvents;
} else {
// touchイベントmouseイベントにする場合(例: touchstart to mousedown)
fromEvents = touchEvents;
toEvents = mouseEvents;
}
// arrayキーによるイベントスイッチ
fromKey = fromEvents.indexOf(event);
if (fromKey !== -1) {
event = toEvents[fromKey];
}
// スイッチされたイベントを登録
self.on(event, selector, callback);
return self;
}
});
}).call(this);
@beeant
Copy link
Author

beeant commented Oct 24, 2013

$(document).ambTouch('click', function() {});

turn to,

on PC:
$(document).on('click', function() {});

on Smart Phone where touch events exist:
$(document).on('tap', function() {});

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment