前端中移动端的事件解析

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;