关于移动端的问题

移动端的点透：
当上层元素发生点击的时候，下层元素也有点击（焦点）特性，
在300ms之后，如果上层元素消失或者隐藏，目标点就会“漂移”到
下层元素身上，就会触发点击行为。

    解决：
        1.下层不要使用有点击（焦点）特性的元素。

        2.阻止pc事件。

        1.IOS10下设置meta禁止用户缩放是不可行的。（使用阻止pc事件就可以在IOS10下禁止用户缩放）

        2.解决IOS10下溢出隐藏的问题。

        3.禁止系统默认的滚动条、阻止橡皮筋效果

        4.禁止长按选中文字、选中图片、系统默认菜单

        5.解决点透问题

        6.也阻止了焦点元素的焦点行为(要正常使用：ev.stopPropagation()阻止冒泡)

document.addEventListener(‘touchstart’,function(ev){
ev.preventDefault();
}, { passive: false });

/*
当给某个元素加上了事件绑定函数之后，事件函数默认的第一个参数就是事件对象
事件对象：
当用户在浏览器下触发了某个行为，事件对象会记录用户操作时一些细节信息。

    touches 当前位于*屏幕*上的所有手指的一个列表

    targetTouches 位于当前DOM元素上的手指的一个列表

    changedTouches  涉及当前事件的手指的一个列表

*/
document.addEventListener('touchstart',function(ev){
    ev.preventDefault();
});
var div = document.getElementById('div1');


div.addEventListener('touchmove',start);
function start(ev){
    //this.innerHTML = ev.touches.length;
    //this.innerHTML = ev.targetTouches.length;
    this.innerHTML = ev.changedTouches.length;
}

//判断安卓还是ios
var u = navigator.userAgent;
var isAndroid = u.indexOf(‘Android’) > -1 || u.indexOf(‘Adr’) > -1;
var isiOS = !!u.match(/(i[^;]+;( U;)? CPU.+Mac OS X/);

检测横竖屏
// window.orientation
// 横屏 90 -90
// 竖屏 0 - 180

设备的晃动
window.addEventListener(‘devicemotion’, function(e) {
var motion = e.accelerationIncludingGravity;
var x = Math.round(motion.x);
var y = Math.round(motion.y);
var z = Math.round(motion.z);
})

检测手机角度变换
window.addEventListener(‘deviceorientation’, function(e) {
var x = Math.round(e.beta);
var y = Math.round(e.gamma);
var z = Math.round(e.alpha);
});

var box = document.querySelector(‘#box’);
/*
当手指触摸元素，当前屏幕上有两根或者两根以上的手指执行
*/
box.addEventListener(‘gesturestart’, function(e) {
this.style.background = “blue”;
});
/*
当我们触发了 gesturestart时，手指位置发生变化时执行
*/
box.addEventListener(‘gesturechange’, function(e) {
this.style.background = “blue”;
});
/*
当我们触发了 gesturestart时，然后抬起手指，这时屏幕上的手指个少于2个或者当前元素没有手指了，就会触发gestureend
*/
box.addEventListener(‘gestureend’, function(e) {
this.style.background = “red”;
});