事件点透
产生原因：pc端的点击事件在移动端也有效果，但是在移动端使用点击事件会有300毫秒的延迟，如果有两个元素是重叠的，点击之后上面那个元素消失了就会出现点透事件，如果下面元素有点击事件，就会被触发，因为执行过程：手指按下之后，会先执行touch事件，然后记录点击的坐标，300ms之后，在该坐标上查找元素，如果该元素绑定了点击事件，就把事件执行了
解决方法：
- e.preventDefault ( ) 阻止默认事件
- 延迟三百毫秒以上再处理事件
移动端怎么固定横屏显示?
- 检测手机竖屏的时候，把根元素旋转90deg
- 检测手机横屏的时候，根元素旋转0deg
移动端输入框被遮挡了怎么办?
- focus时：获取屏幕高度，比较输入框的底部是否超出了屏幕，超出就让外框向上移动超出的距离
- blur时：让外框回到原来位置
<div class="page">
<div class="info"></div>
<input type="text" class="text" name="">
</div>
<script type="text/javascript" src="js/mTween.js"></script>
<script type="text/javascript">
(function(){
var page = document.querySelector('.page');
var text = document.querySelector('.text');
var info = document.querySelector('.info');
var old = 0;
css(page,"translateY",0);
/*
移动端输入框被遮挡的问题
1) 在软件盘弹出之后（在focus中加个延迟时间），获取input的坐标
2) 判断input是否遮挡
1. 判断 input 是否在 可视区的高度以下
3) 如果被遮挡了 就向上移动整个页面
1. 用被软件盘遮挡的距离
*/
text.addEventListener('focus', function(e) {
setTimeout(function(){
//延迟一段时间之后，才可以获取到软键盘弹出之后的坐标
var rect = text.getBoundingClientRect();
var h = document.documentElement.clientHeight;
old = css(page,"translateY");
if(rect.bottom > h){
//info.innerHTML = "被遮挡了";
var dis = rect.bottom - h;
css(page,"translateY", old - dis);
}
},1000);
});
text.addEventListener('blur', function(e) {
old = css(page,"translateY",old);
});
})();
</script>
解决安卓下点击了软键盘缩放之后，触发不了input的blur的问题
<body>
<input id="text" type="text" name="">
<div id="info"></div>
<script type="text/javascript">
(function(){
var text = document.querySelector('#text');
var info = document.querySelector('#info');
text.onfocus = function(){
//软键盘的弹出 会影响窗口的大小发生改变
// 展开是 改变一次，收缩起来又改变一次
window.addEventListener('resize', toResize);
};
function toResize(){
window.removeEventListener('resize', toResize);
window.addEventListener('resize', toBlur);
}
function toBlur(){
window.removeEventListener('resize', toBlur);
text.blur();
}
})();
</script>
安卓下大面积触摸会导致触发touchmove的问题
- 判断一下touchstart的上一次位置和当前位置是否一样，一样就使move return掉
<body>
<div class="page">
<div id="box"></div>
</div>
<script type="text/javascript">
var page = document.querySelector('.page');
page.addEventListener('touchstart', function(e) {
e.preventDefault();
});
var lastPoint = {};
box.addEventListener('touchstart', function(e) {
lastPoint = {
x:e.changedTouches[0].pageX,
y:e.changedTouches[0].pageY
}
this.innerHTML = "start";
this.innerHTML += "<br/>x:"+e.changedTouches[0].pageX;
this.innerHTML += "<br/>y:"+e.changedTouches[0].pageY;
});
box.addEventListener('touchmove', function(e) {
if(e.changedTouches[0].pageX == lastPoint.x
&&e.changedTouches[0].pageY == lastPoint.Y){
return;
}
this.innerHTML += "<br/>move";
this.innerHTML = "x:"+e.changedTouches[0].pageX;
this.innerHTML += "<br/>y:"+e.changedTouches[0].pageY;
lastPoint = {
x:e.changedTouches[0].pageX,
y:e.changedTouches[0].pageY
}
});
</script>
目前新版浏览器不支持viewport中的禁止缩放和最大缩放值限制
- 阻止默认事件
多指操作的兼容
- 安卓下没有gestures事件，需要利用e.touches自己去封装。
document.addEventListener('touchstart', function(e) {
e.preventDefault();
});
/*
init:{
el: 元素,
start:fn,
change:fn,
end:fn
}
*/
(function(){
var box = document.querySelector('#box');
var startDeg = 0;
var startScale = 0;
css(box,"rotate",0);
css(box,"scale",100);
gesture({
el:box,
start: function(e){
startScale = css(box,"scale")/100;
startDeg = css(box,"rotate");
this.style.background = "blue";
},
change: function(e){
css(this,"scale",(e.scale * startScale)*100);
this.innerHTML = e.rotation;
css(box,"rotate",e.rotation + startDeg);
},
end: function(e){
this.style.background = "red";
}
});
})();
function gesture(init){
var el = init.el;
var isGesture = false;
var startDis = 0;
var startDeg = 0;
el.addEventListener('touchstart', function(e) {
if(e.touches.length >= 2){
startDis = getDis(e.touches[0],e.touches[1]);
startDeg = getDeg(e.touches[0],e.touches[1]);
isGesture = true;
init.start&&init.start.call(el,e);
}
});
el.addEventListener('touchmove', function(e) {
if(isGesture&&e.touches.length >= 2){
isGesture = true;
var nowDis = getDis(e.touches[0],e.touches[1]);
var nowDeg = getDeg(e.touches[0],e.touches[1]);
e.scale = nowDis/startDis;//缩放值
e.rotation = nowDeg - startDeg;
init.change&&init.change.call(el,e);
}
});
el.addEventListener('touchend', function(e) {
if(isGesture){
init.end&&init.end.call(el,e);
}
isGesture = false;
});
}
function getDis(Point,Point2){
return Math.sqrt((Point.pageX - Point2.pageX)*(Point.pageX - Point2.pageX) + (Point.pageY - Point2.pageY)*(Point.pageY - Point2.pageY));
}
function getDeg(Point,Point2){
var y = Point.pageY - Point2.pageY;
var x = Point.pageX - Point2.pageX;
return Math.atan2(y,x)/Math.PI*180;
}
滑屏时的卡顿问题
- 阻止默认事件
transition移动端的闪屏问题
- 把外框变成3D的
使用了3d做动画之后，3d元素下边的文字失真的问题
- 给上面动画的幻灯片什么的外层加上绝对定位，定位里面一层加上相对定位。
部分安卓下调用file，只能调用到相册，不能调用摄像头
- 在input上加上一个caption属性，但是如果是x5或者是ios浏览器下就会出现只能调到摄像头的问题，所以要加一个判断，判断浏览器的版本，如果是iso浏览器或者x5浏览器，就把加caption属性这个renturn掉不加
audio的不能自动播放问题
- 给document加上.play()
如何判断网络环境是无线还是流量
- navigator里面有所有和网络相关的东西