Passive Event Listeners 这个东西其实有一段时间了，关注 2016 Google I/O 的 Mobile Talk 的同学应该有些印象。

1、它有什么用？

A new feature in the DOM spec that enable developers to opt-in to better scroll performance by eliminating the need for scrolling to block on touch and wheel event listeners.

Developers can annotate touch and wheel listeners with {passive: true} to indicate that they will never invoke preventDefault.

提高页面的滑动流畅度。

如何使用：

function handler () {
  console.log('DDFE');
}
document.addEventListener('mousewheel', handler, {passive: true})

其实变化就是：前端 DOM 中常用常考的 addEventListener 的第三个参数：之前都是 true | false

简介

hammer.js是一个多点触摸手势库，能够为网页添加多点触摸事件，免去自己监听底层touchstart、touchmove、touchend事件。hammer.js不但支持触摸事件的浏览器，在桌面浏览器也能将鼠标点击事件当做触摸，方便开发人员进行调试。

特点

不需要依赖任何其他的框架，并且整个框架非常小。

事件架构

hammer.js主要对触屏的六大事件进行监听。

1.pan事件：在指定的dom区域内，一个手指放下并移动时间，即触屏中的拖动事件。这个事件在触屏中比较常用。该事件还可以对以下事件进行监听并处理：
panstart拖动开始、panmove拖动过程、panend拖动结束、pancancel拖动取消、panleft向左拖动、panright向右拖动、panup向上拖动、pandown向下拖动。
2.pinch事件：在指定区域内两个手指（默认）或多个手指相对移动（越来越近）或相对移动（越来越远）事件。该事件分别对以下事件进行监听:
pinchstart多点触控开始、pinchmove多点触控过程、pinchend多点触控结束、pinchcancel多点触控取消、pinchin多点触控手指靠近、pinchout多点触控手指越来越远。
3.press事件：在指定的dom区域内按压，该事件不能包含移动，最小按压时间为500毫秒。常用于手机上的“复制、粘贴”等功能。该事件对以下事件进行监听处理：
pressup按压事件离开时触发
4.rotate事件：在指定的dom区域内，当两个手指或更多手指呈圆形旋转的时候触发。该事件对以下事件进行监听：
rotatestart旋转开始、rotatemove旋转过程、rotateend旋转结束、rotatecancel旋转取消。
5.swipe事件：一个手指在屏幕上滑动，即滑动事件。该事件对以下事件进行监听：
Swipeleft：向左滑动、Swiperight：向右滑动、Swipeup：向上滑动、Swipedown：向下滑动。
6.tap事件：在指定dom事件区域内，一个手指轻拍或点击时触发该事件(类似PC端的click)。该事件最大点击时间为250毫秒，如果超过250毫秒则按Press事件进行处理。

注意点

tap和click在安卓系统上可以同时触发，但click事件会有几百毫秒的延迟判断是否是点击事件，即tap事件先触发，过一段时间在触发click事件。

使用方法

<script>
//创建一个新的hammer对象并且在初始化时，指定要处理的dom元素
var hammertime=new Hammer(document.getElementById('test'))
//为该dom元素添加指定的事件，如触屏移动事件
hammertime.on('pan',function(e){
    console.log(e)
})
</script>
rotate,pinch需要手动添加事件监听程序。

//如
 var hammertime = new Hammer(document.getElementById("test"));
 hammertime.add(new Hammer.rotate());
 hammertime.on("rotate",function(){.......})

现象：
在某些手机上，height 和 line-height 设置相同时，文字不垂直居中，文字会偏上一点，height 越小时越明显。尝试多种方法无果，有人说是字体问题，参考其他 UI 框架，也存在此问题。

解决方法：
line-height的兼容问题不太好解决，容器高度越小，显示效果的差距越明显。稍微大一点的高度，最好把line-height设置为高度+1px，两个平台显示都还不错。

参考：
https://segmentfault.com/a/1190000006237977