移动端H5的touch事件与iOS的 gesture事件

1、touch事件

Touch事件列表:
touchstart: 当手指触摸到屏幕时被触发
touchend: 当手指离开屏幕时被触发
touchmove: 当手指在屏幕上移动时被触发
touchcancel: 当Touch被打断或是有太多手指触摸屏幕时被触发。

使用：

document.addEventListener('touchstart',function(e){},false)
document.addEventListener('touchmove',function(e){},false)
document.addEventListener('touchend',function(e){},false)

2、gesture事件 ，改事件只有iOS可以使用

1.gesturestart：当一个手指已经按在屏幕上，另一个手指又触摸屏幕的时候触发。类似于touchstart的作用一样； 
2.gesturechange：当触摸屏幕的任何一个手指的位置发生变化的时候触发。 
3.gestureend：当任何一个手指从屏幕上面移开时触发。

使用：

document.addEventListener('gesturestart',function(e){},false)
document.addEventListener('gesturechange',function(e){},false)
document.addEventListener('gestureend',function(e){},false)

解决ios10版本以上双击放大和缩放问题

移动端安卓和苹果解决页面缩放一般用meta标签来解决

但 iOS 10开始，meta 设置在 Safari 内无效了。

后来在网上看到一个解决方案：

 

window.onload = function() {

    // 阻止双击放大

    var lastTouchEnd = 0;

    document.addEventListener('touchstart', function(event) {

        if (event.touches.length > 1) {

             event.preventDefault();

        }

    });

    document.addEventListener('touchend', function(event) {

        var now = (new Date()).getTime();

        if (now - lastTouchEnd <= 300) {

            event.preventDefault();

        }

        lastTouchEnd = now;

    }, false);

    // 阻止双指放大

    document.addEventListener('gesturestart', function(event) {

        event.preventDefault();

    });

}