给jquery 添加触屏事件,上下左右 touchwipe插件
touchwipe.js
(function($){$.fn.touchwipe=function(settings){var config={min_move_x:20,min_move_y:20,wipeLeft:function(){},wipeRight:function(){},wipeUp:function(){},wipeDown:function(){},preventDefaultEvents:true};if(settings)$.extend(config,settings);this.each(function(){var startX;var startY;var isMoving=false;function cancelTouch(){this.removeEventListener(‘touchmove‘,onTouchMove);startX=null;isMoving=false}function onTouchMove(e){if(config.preventDefaultEvents){e.preventDefault()}if(isMoving){var x=e.touches[0].pageX;var y=e.touches[0].pageY;var dx=startX-x;var dy=startY-y;if(Math.abs(dx)>=config.min_move_x){cancelTouch();if(dx>0){config.wipeLeft()}else{config.wipeRight()}}else if(Math.abs(dy)>=config.min_move_y){cancelTouch();if(dy>0){config.wipeDown()}else{config.wipeUp()}}}}function onTouchStart(e){if(e.touches.length==1){startX=e.touches[0].pageX;startY=e.touches[0].pageY;isMoving=true;this.addEventListener(‘touchmove‘,onTouchMove,false)}}if(‘ontouchstart‘in document.documentElement){this.addEventListener(‘touchstart‘,onTouchStart,false)}});return this}})(jQuery);
使用方法:
$(‘html‘).touchwipe({
wipeLeft:function(){
alert(‘左‘);
},
wipeRight:function(){
alert(‘右‘);
},
wipeUp:function(){
alert(‘下‘);
},
wipeDown:function(){
alert(‘上‘);
},
preventDefaultEvents:true
});
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。