阻止H5左右滑动，保留上下滑动

let startX,startY;

document.addEventListener("touchstart",function(e){

    startX = e.touches[0].pageX;

    startY = e.touches[0].pageY;

});

document.addEventListener("touchmove",function(e){

    var moveX = e.touches[0].pageX;

    var moveY = e.touches[0].pageY;

    //因为上下滑动的时候多少左右会带一点横移

    //比较横移距离与垂直移动距离的大小，哪个大就是往哪个方向移动

    if(Math.abs(moveX-startX)>Math.abs(moveY-startY)){

        e.preventDefault();

    }

}, {passive: false});

addEventListener(type, listener[, useCapture ])
addEventListener(type, listener[, options ])
addEventListener(type, listener, {
    capture: false,
    passive: false,
    once: false
})
三个属性都是布尔类型的开关，默认值都为 false。其中 capture 属性等价于以前的 useCapture 参数；once 属性就是表明该监听器是一次性的，执行一次后就被自动 removeEventListener 掉，还没有浏览器实现它；passive 属性是本文的主角，Firefox 和 Chrome 已经实现; passive 监听器诞生了，passive 的意思是“顺从的”，表示它不会对事件的默认行为说 no，浏览器知道了一个监听器是 passive 的，它就可以在两个线程里同时执行监听器中的 JavaScript 代码和浏览器的默认行为了。

Passive Event Listeners特性实际上是为了解决浏览器页面滑动流畅度而设计的，它通过扩展事件属性passive让Web开发者来告知浏览器监听器是否会阻止事件的默认行为，从而让浏览器可以更智能地决策并优化，这其中涉及到了Chrome的多线程渲染框架、输入事件处理等知识。

Web开发者通过一个新的属性passive来告诉浏览器，当前页面内注册的事件监听器内部是否会调用preventDefault函数来阻止事件的默认行为，以便浏览器根据这个信息更好地做出决策来优化页面性能。当属性passive的值为true的时候，代表该监听器内部不会调用preventDefault函数来阻止默认滑动行为，Chrome浏览器称这类型的监听器为被动（passive）监听器。目前Chrome主要利用该特性来优化页面的滑动性能，所以Passive Event Listeners特性当前仅支持mousewheel/touch相关事件。