美文网首页
移动端触屏事件hammer.js

移动端触屏事件hammer.js

作者: 风间澈618 | 来源:发表于2018-05-10 18:58 被阅读0次

hammerjs.github地址
以前的移动端项目由于已经使用了jQuery,当我再去使用zepto的时候发现会有一些冲突,并且zepto和jQuery的功能有些相似,于是找到了hammer.js,github上面start还是蛮多的,包含了许多触屏事件。
我想要实现的一个功能是从屏幕侧边开始的滑动,而不是页面任何位置滑动(因为会影响页面中有轮播图的滑动),让侧边栏出现,这个功能貌似webapp感应不了。于是只能从页面按钮中点击出现侧边栏,但是当侧边栏出现,右滑回去消失是可以实现的。
引入hammer.js库

var hammertime = new Hammer(myElement, myOptions);
hammertime.on('pan', function(ev) {
    console.log(ev);
});

myElement必须是一个dom对象,如果使用了zepto或者jquery的需要转化为dom对象
1. pan类(平移)

  • pan
  • panstart
  • panmove
  • panend
  • pancancel
  • panleft
  • panright
  • panup
  • pandown
    2. pinch类(捏拿缩放)
  • pinch
  • pinchstart
  • pinchmove
  • pinchend
  • pinchcancel
  • pinchin
  • pinchout
    3. press类(按住)
  • press
  • pressup
    4. rotate类(旋转)
  • rotate
  • rotatestart
  • rotatemove
  • rotateend
  • rotatecancel
    5. swipe类(滑动)
  • swipe
  • swipeleft
  • swiperight
  • swipeup
  • swipedown

相关文章

  • 移动端触屏事件hammer.js

    hammerjs.github地址以前的移动端项目由于已经使用了jQuery,当我再去使用zepto的时候发现会有...

  • 移动端事件

    移动端事件 触屏事件 移动端事件要比PC端要简单的多,移动端主要就有ontouchstart ontouchend...

  • touch触摸事件

    原声移动端触屏事件touch分为3个事件: touchstart 触摸开始touchmove 触摸移动touc...

  • 移动端触屏事件

    什么是触屏事件?移动端的触摸产生的一系列行为; 在移动端,原生触摸事件只有以下三种类型,其他所有的触摸事件都是由这...

  • 移动端开发小结

    前言 会了PC端开发就会了移动端开发,这个说法没错,只是点击(click)事件变成了触屏事件(touch),滑轮滚...

  • Web API -- 触屏事件

    1.1. 触屏事件 1.1.1 触屏事件概述 移动端浏览器兼容性较好,我们不需要考虑以前 JS 的兼容性问题,可以...

  • webAPI-day-07(触屏事件,click,移动端常用框架

    1.1. 触屏事件 1.1.1 触屏事件概述 移动端浏览器兼容性较好,我们不需要考虑以前 JS 的兼容性问题,可以...

  • TouchSlide 插件使用介绍

    TouchSlide 可用于javascript触屏滑动特效插件,移动端滑动特效,触屏焦点图,触屏Tab切换,触屏...

  • 移动端

    移动端开发和 PC 端开发有哪些区别 移动端 考虑手机兼容性 使用触屏事件 布局自适应rem 动画处理CSS3 移...

  • 【前端 JavaScript WebAPI】 07 - 移动端特

    1. 触屏事件 1.1 触屏事件概述 移动端浏览器兼容性较好,我们不需要考虑以前 JS 的兼容性问题,可以放心的使...

网友评论

      本文标题:移动端触屏事件hammer.js

      本文链接:https://www.haomeiwen.com/subject/sfetdftx.html