1、click事件
在移动端中,click默认有300ms的延迟,因为用户可能触发双击事件。
2、touch事件
touchstart:手指触摸到屏幕会触发事件
touchmove:当手指在屏幕上移动时会触发事件
touchend:当手指离开屏幕时触发事件
touchcancel:一般是系统中断了touch的行为,触发的事件
3、zepoto.js
Zepto是一个轻量级的针对现代高级浏览器的JavaScript库,专门为移动端定制的框架;
与jquery有着类似的API,同jQuery一样都是以$为核心函数,俗称:会jquery就会用zepto。
Zepto的特点
① 针对移动端
② 轻量级,压缩版本只有8kb左右
③ 响应,执行快
④ 目前API完善的框架中体积最小的一个
4、swiper.js
swipe.js是一个比较有名的触摸滑动插件,它能够处理内容滑动,支持自定义选项,你可以让它自动滚动,控制滚动间隔,返回回调函数等。经常在移动前端开发中使用。
- startSlide Integer (default:0) - 开始滚动的位置
- speed Integer (default:300) - 动画滚动的间隔(秒数)
- auto Integer - 开始自动幻灯片(以毫秒为单位幻灯片之间的时间)
- continuous Boolean (default:true) - 创建一个无限的循环(当滑动到所有动画结束时是否循环滑动)
- disableScroll Boolean (default:false) - 当滚动滚动条时是否停止幻灯片滚动
- stopPropagation Boolean (default:false) - 是否停止事件冒泡
- callback Function - 幻灯片运行中的回调函数
- transitionEnd Function - 动画运行结束的回调函数
5、iscroll.js
IScroll.js插件是兼容所有移动端滚动条事件的插件,它也可以非常好的在一个容器元素中处理滚动。
IScroll.js允许我们传入第二个参数来配置滚动事件的属性;
- scrollbars: true 是否显示滚动条。默认为false;
- fadeScrollbars:true 滚动条淡入淡出效果,当然前提是你滚动条显示了。默认为false;
- interactiveScrollbars 是否拖动滚动条。默认为false;
- resizeScrollbars 滚动条的长度是按照比例设置的,如果想要固定尺寸,可以设置为flase;默认为true;
- bounce: false 滚动到达容器边界时是否执行反弹动画。默认为true;
- mouseWheel:true 是否显示启用鼠标滚动;默认为false;
- invertWheelDirection 激活鼠标滚动后是否启用反向滚动;默认为false;
- click:true iScroll禁止默认鼠标的点击行为,如果要使用设置true;默认为false;
- disableMouse、disablePointer、options.disableTouch
IScrol默认监听所有的指针事件,如果确认项目定位的平台,可以将不使用的效果禁用,减少资源占用;默认为false; - startX、startY 设置滚动条初始偏移位置;默认为无;