jquery移动设备上的滑动事件

原创 2015年11月19日 10:16:45

原码:

$.fn.onTouchUpOrDown = function(handler_up, handler_down) {
    var element = $(this);
    var start_client_y;
    var end_client_y;
    element[0].addEventListener('touchstart', function(event) {
      start_client_y = event.touches[0].clientY;
      event.preventDefault();
    });
    element[0].addEventListener('touchend', function(event) {
      end_client_y = event.changedTouches[0].clientY
      if (end_client_y > start_client_y) {
        if (typeof(handler_down) == 'function') {
          handler_down();
        }
      }
      if (end_client_y < start_client_y) {
        if (typeof(handler_up) == 'function') {
          handler_up();
        }
      }
    });
  }

调用:

$(document.body).onTouchUpOrDown(
  function(){
     console.log('swipe up');
  },
  function(){
     console.log('swipe down');
  }
)

特别说明:

在移动设备上,如果触发了touchmove事件,touchend事件有时不会触发。需要给touchstart加上preventDefaut。看官可据此实现左滑和右滑。



移动设备、手机浏览器Javascript滑动事件代码

以下经过本人测试成功。 测试平台:三星S5830I 操作系统:Android 2.3.6 浏览器:UC浏览器 HTML标准:HTML5   测试了三个事件:touc...
  • zljjava
  • zljjava
  • 2014年08月29日 00:59
  • 4854

移动设备、手机浏览器Javascript滑动事件代码

以下经过本人测试成功。 测试平台:三星S5830I 操作系统:Android 2.3.6 浏览器:UC浏览器 HTML标准:HTML5   测试了三个事件:touchstart、touch...
  • zht666
  • zht666
  • 2013年02月28日 11:57
  • 104286

as3用于移动设备滑动的类

  • 2013年09月10日 18:36
  • 3KB
  • 下载

Mobiscroll的介绍【一款兼容PC和移动设备的滑动插件】

Mobiscroll是一个用于触摸设备的日期和时间选择器,它的使用不会改变HTML5、PhoneGap以及混合应用的原生用户体验。作为一款jQuery日期插件,用户可以自定义主题样式,为自己的移动项目...
  • shimiso
  • shimiso
  • 2015年11月11日 16:00
  • 22617

html5移动设备浏览器触屏事件兼容处理

自打诺基亚被苹果干趴下,Google开源Android系统,智能设备数量以及种类以不可阻挡的势头发展,苹果封闭的生态系统,Android开源开放的生态导致,殊途同归地给了我等屌丝开发者相同苦逼的命运,...

JS移动设备触摸事件API

属性(Attribute) 描述(Description) identifier unique numeric identifier target ...
  • cuo9958
  • cuo9958
  • 2014年05月14日 10:05
  • 648

AS3 移动设备上的触控事件和手势

当涉及到移动设备的时候,简单鼠标点击的日子已经一去不复返了。实际上,有很多很酷触控事件和手势真的可以扩展应用程序的功能。那么触控事件和手势有什么区别呢?嗯,触控事件是设备提供的触摸点原始数据。手势是利...

移动设备safari不支持jquery的live绑定的解决办法

我在开发微信公众号的时候遇到的这个问题,在安卓里用live去绑定事件都没问题,用on也可以,但是到在iphone中的微信里确始终没法响应绑定的事件,后来网上找了些方法,有些可以,有些不行,这里给写下来...

帮助你在移动设备上生成倾斜控制(重力控制)的旋转效果jQuery插件 - lenticular.js

日期:2012-9-27  来源:GBin1.com 在线演示 相信大家如果使用过iphone/ipad的话,肯定对于倾斜控制(重力控制)比较熟悉,在今天的插件介绍中,我们推荐一款帮助...
  • jjfat
  • jjfat
  • 2012年09月27日 13:00
  • 743
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jquery移动设备上的滑动事件
举报原因:
原因补充:

(最多只允许输入30个字)