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

以下经过本人测试成功。

测试平台:IOS7
浏览器:UC浏览器
HTML标准:HTML5

测试了三个事件:touchstart、touchmove 和 touchend,并获取了触摸时触点在页面上的坐标,根据坐标进行了左右滑动、上下滑动判断。

代码如下:

  
  
  
      
        TouchEvent测试  
          
      
    
        

TouchEvent测试








未触发事件!
  • 测试条目1
  • 测试条目2
  • 测试条目3
  • 测试条目4
  • 测试条目5
  • 测试条目6
  • 测试条目7
  • 测试条目8
  • 测试条目9
  • 测试条目10
  • 测试条目11
  • 测试条目12
  • 测试条目13
  • 测试条目14
  • 测试条目15
  • 测试条目16
  • 测试条目17
  • 测试条目18
  • 测试条目19
  • 测试条目20

下面是jQuery Mobile实现上下滑动的方式:

jQuery Mobile左右滑动事件:swipe(水平滑动30px以上时触发)、swipeLeft(向左滑)、swipeRight(向右滑)

jQuery Mobile垂直滑动事件:scrollstart(上下滚动)、scrollend(滚动停止)

jQuery Mobile触摸点击事件:tap(快速触碰)、taphold(触碰并保持750ms以上触发)

  
  
      
        Ajax测试  
          
          
          
          
          
          
      
      
        
  • 信息列表
  • 信息1
  • 信息2
  • 信息3
  • 信息4
  • 信息5
  • 信息6
  • 信息7
  • 信息8
  • 信息9
  • 信息10

发布者

Jason Lin

人生就是一场旅行,请多留意沿途的风景!

发表评论

邮箱地址不会被公开。 必填项已用*标注