jquery判断上|下|左|右滑动
七娃博客1,208人阅读
如何在手机端检测用户上下左右滑动事件?以下为jquery代码:
$("#wrapper").on("touchstart", function(e) { // 判断默认行为是否可以被禁用 if (e.cancelable) { // 判断默认行为是否已经被禁用 if (!e.defaultPrevented) { e.preventDefault(); } } startX = e.originalEvent.changedTouches[0].pageX, startY = e.originalEvent.changedTouches[0].pageY; }); $("#wrapper").on("touchend", function(e) { // 判断默认行为是否可以被禁用 if (e.cancelable) { // 判断默认行为是否已经被禁用 if (!e.defaultPrevented) { e.preventDefault(); } } moveEndX = e.originalEvent.changedTouches[0].pageX, moveEndY = e.originalEvent.changedTouches[0].pageY, X = moveEndX - startX, Y = moveEndY - startY; //左滑 if ( X > 0 ) { //alert('左滑'); if(true) { } } //右滑 else if ( X < 0 ) { //alert('右滑'); if(true) { } } //下滑 else if ( Y > 0) { alert('下滑'); } //上滑 else if ( Y < 0 ) { alert('上滑'); } //单击 else{ alert('单击'); } });
使用时将“#wrapper”改成检测的元素即可!
评论 | 0 条评论
登录之后才可留言,前往登录