Javascript 独立的jQuery“触摸”方法？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2701139/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Standalone jQuery "touch" method?
提问by dclowd9901
So, I'm looking to implement the ability for a plugin I wrote to read a touch "swipe" from a touch-capable internet device, like an iPhone, iPad or android.
因此，我希望实现我编写的插件的功能，以便从具有触摸功能的互联网设备（如 iPhone、iPad 或 android）读取触摸“滑动”。
Is there anything out there? I'm not looking for something as full as jQtouch, though was considering reverse engineering the code I would need out of it.
外面有什么吗？我不是在寻找像 jQtouch 这样完整的东西，尽管正在考虑对我需要的代码进行逆向工程。
Any suggestions on the best way to approach this? A snippet of code already available?
有关解决此问题的最佳方法的任何建议？代码片段已经可用？
Addendum: I realize in hindsight the solution won't strictly be jQuery, as I'm pretty sure there aren't any built-in methods to handle this. I would expect standard Javascript to find itself in the answer.
附录：我事后意识到解决方案并不是严格的 jQuery，因为我很确定没有任何内置方法来处理这个问题。我希望标准 Javascript 能在答案中找到自己。
回答by Ali Habibzadeh
(function($) {
$.fn.swipe = function(options) {
// Default thresholds & swipe functions
var defaults = {
threshold: {
x: 30,
y: 10
},
swipeLeft: function() { alert('swiped left') },
swipeRight: function() { alert('swiped right') },
preventDefaultEvents: true
};
var options = $.extend(defaults, options);
if (!this) return false;
return this.each(function() {
var me = $(this)
// Private variables for each element
var originalCoord = { x: 0, y: 0 }
var finalCoord = { x: 0, y: 0 }
// Screen touched, store the original coordinate
function touchStart(event) {
console.log('Starting swipe gesture...')
originalCoord.x = event.targetTouches[0].pageX
originalCoord.y = event.targetTouches[0].pageY
}
// Store coordinates as finger is swiping
function touchMove(event) {
if (defaults.preventDefaultEvents)
event.preventDefault();
finalCoord.x = event.targetTouches[0].pageX // Updated X,Y coordinates
finalCoord.y = event.targetTouches[0].pageY
}
// Done Swiping
// Swipe should only be on X axis, ignore if swipe on Y axis
// Calculate if the swipe was left or right
function touchEnd(event) {
console.log('Ending swipe gesture...')
var changeY = originalCoord.y - finalCoord.y
if(changeY < defaults.threshold.y && changeY > (defaults.threshold.y*-1)) {
changeX = originalCoord.x - finalCoord.x
if(changeX > defaults.threshold.x) {
defaults.swipeLeft()
}
if(changeX < (defaults.threshold.x*-1)) {
defaults.swipeRight()
}
}
}
// Swipe was canceled
function touchCancel(event) {
console.log('Canceling swipe gesture...')
}
// Add gestures to all swipable areas
this.addEventListener("touchstart", touchStart, false);
this.addEventListener("touchmove", touchMove, false);
this.addEventListener("touchend", touchEnd, false);
this.addEventListener("touchcancel", touchCancel, false);
});
};
})(jQuery);
$('.swipe').swipe({
swipeLeft: function() { $('#someDiv').fadeIn() },
swipeRight: function() { $('#someDiv').fadeOut() },
})
and this is how you detect iphone
这就是你检测 iphone 的方式
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) {
if (document.cookie.indexOf("iphone_redirect=false") == -1) window.location = "path to iphone page";
}
回答by thugsb
There's also jQuery.touchwipe at http://www.netcu.de/jquery-touchwipe-iphone-ipad-library
还有 jQuery.touchwipe 在http://www.netcu.de/jquery-touchwipe-iphone-ipad-library
回答by eikes
The smallest and most jQuery-esque solution is here: https://github.com/eikes/jquery.swipe-events.js
最小和最 jQuery 式的解决方案在这里：https: //github.com/eikes/jquery.swipe-events.js
