前端中移动端的事件解析

Touch

touchstart：当手指触碰屏幕时候发生。不管当前有多少只手指

touchmove：当手指在屏幕上滑动时连续触发。通常我们再滑屏页面，

会调用event的preventDefault()可以阻止默认情况的发生：阻止页面滚动

touchend：当手指离开屏幕时触发

touchcancel：系统停止跟踪触摸时候会触发。

例如在触摸过程中突然页面alert()一个提示框，此时会触发该事件，这个事件比较少用

触摸事件的响应顺序

1、ontouchstart

2、ontouchmove

3、ontouchend

4、onclick  300ms延时

Event

originalEvent 是jquery封装的事件。

targetTouches目标元素的所有当前触摸

changedTouches 页面上最新更改的所有触摸

touches页面上的所有触摸

注意：在touchend事件的时候event只会记录changedtouches

兼容

transitionEnd

过渡结束后触发

animationEnd

动画结束后触发

Animate.css  Css3动画库

Css样式重置

html,body,div, h1,h2,h3,h4,h5,h6,p,blockquote,pre,address,dl,dt,dd,ol,ul,li,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video,progress{margin:0;padding:0; }

*,

::before,

::after{

    /*选择所有的标签*/

    margin: 0;

    padding: 0;

    /*清除移动端默认的点击高亮效果*/

    -webkit-tap-highlight-color: transparent;

    /*设置所有的都是以边框开始计算宽度 百分比*/

    -webkit-box-sizing: border-box; /*兼容*/

    box-sizing: border-box;

}

body{

    font-size: 14px;

    font-family: "MicroSoft YaHei",sans-serif;/*设备默认字体*/

    color: #333;

}

a{

    color: #333;

    text-decoration: none;

}

a:hover{

    text-decoration: none;

}

ul,ol{

    list-style: none;

}

input{

    border: none;

    outline: none;

    /*清楚移动端默认的表单样式*/

    -webkit-appearance: none;

}

页面卷去的高度  document.body.scrollTop;