Last active
December 26, 2015 09:39
-
-
Save beeant/7131396 to your computer and use it in GitHub Desktop.
re-map mouse to touch event and vice versa
This file contains hidden or 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
(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); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
$(document).ambTouch('click', function() {});
turn to,
on PC:
$(document).on('click', function() {});
on Smart Phone where touch events exist:
$(document).on('tap', function() {});