标签：tde 操作 默认事件 移动 otto 解决方法 pagex 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>
<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>
<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>
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; }
标签：tde 操作 默认事件 移动 otto 解决方法 pagex return 安卓
原文地址：http://www.cnblogs.com/hjj2ldq/p/7487356.html
