一、设备事件
移动端事件都要在head里面设置：<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
获取移动端设备的尺寸：screen.width,screen.height
手机屏幕发生翻转时触发的事件orientationchange
我们的手机是有方向的，有一个事件可以捕获设备的方向，设置层面的，只要使屏幕旋转就可以触发。
orientation方向
window.addEventListener("orientationchange",function(event) {
var ev=event||window.event;
//当前的方向
div.innerHTML=window.orientation;//在手机屏幕上显示当前的方向
//方向改变
switch(window.orientation) {
case 0:
div.style.backgroundColor="blueviolet"
break;
case 90:
div.style.backgroundColor="deeppink"
break;
case -90:
div.style.backgroundColor="orangered"
break;
default:
break;
}
},false)
设备方向事件deviceOrientationEvent
window.addEventListener("deviceorientation",function(event) {
var ev=event||window.event;
div.innerHTML="Alpha:"+event.alpha+"<br/>Beta:"+event.beta+"<br/>Gamma:"+event.gamma;
//alpha代表z轴方向变化，范围：0~360
//beta代表x轴方向变化，范围：-180~180
//gamma代表y轴方向变化，范围：-90~90
},false)
二、触屏事件
//触屏事件，触摸事件
//1.触摸开始时触发的事件
div.addEventListener("touchstart",function(event) {
var ev=event||window.event;
//console.log(ev);
//触摸开始，让div随机变色
function random(max,min) {
return parseInt(Math.random()*(max-min+1)+min);
}
div.style.backgroundColor="rgb("+random(255,0)+","+random(255,0)+","+random(255,0)+")";
},false)
//2.触摸时进行移动的事件
div.addEventListener("touchmove",function(event) {
var ev=event||window.event;
//阻止默认事件
ev.preventDefault();
var x=ev.touches[0].clientX;
var y=ev.touches[0].clientY;
console.log("触摸移动", x, y)
},false)
//3.触摸结束时触发事件
div.addEventListener("touchend",function(){
console.log("触摸结束")
},false)
//4.触摸终止 touchcancel突发事件结束触摸
/*touches屏幕上所有触摸点的集合
* targetTouches目标对象上的触摸点的集合
* changedTouches改变的触摸点的集合
*/
var div1=document.getElementById("div1");
var div2=document.getElementById("div2");
div1.addEventListener("touchstart",function(event) {
var ev=event||window.event;
div1.innerHTML="tl:"+ev.touches.length+"tal:"+ev.targetTouches.length+"cL:"+ev.changedTouches.length;
},false)
div2.addEventListener("touchstart",function(event) {
var ev=event||window.event;
div2.innerHTML="tl:"+ev.touches.length+"tal:"+ev.targetTouches.length+"cL:"+ev.changedTouches.length;
},false)
三、手势事件
//手势事件与触屏事件很像
//gesturestart touchstart
//gesturechange touchmove
//gestureend touchend
//rotation 与 scale 是手势相对于触屏事件新加的属性。
var div1=document.getElementById("div1");
div1.addEventListener("gesturestart",function(ev) {
//alert("哈哈");
},false);
div1.addEventListener("gesturechange",function(ev) {
ev.preventDefault();
var r=ev.rotation;
var s=ev.scale;
//div1.style.transform = "rotate(" + r + "deg)";
div1.style.transform="scale("+s+")";
},false);
四、touch.js
touch.js既支持移动端，也支持PC端
要引入<script type="text/javascript" src="js/touchjs.min(1).js"></script>
使用touch.js为div添加一个轻拍手势,touch.on(),tap，三个参数，第一个参数 对象，为谁添加就传入谁；第二个参数 手势名称；第三个参数 回调函数。
var touchDiv=document.getElementById("touchDiv");
touch.on(touchDiv, "tap", function(ev) {
//console.log(ev);
//按照轻拍的规律触摸了div就可以执行回调函数的代码
touchDiv.innerHTML = ev.type;
touchDiv.style.backgroundColor="red";
});
//可以直接传一个选择器字符串，内部封装了querySelector，不需要获取元素
touch.on("#touchDiv div","tap",function(ev){
console.log(ev);
this.style.backgroundColor="yellow";
//this.innerHTML="哈哈"
});
//hold长按
touch.on("#touchDiv","hold",function(ev){
this.innerHTML=ev.type;
})；
//drag拖拽
var x=0;
var y=0;
var disX=0;
var disY=0;
touch.on("#touchDiv","drag",function(ev) {
//position.x，position.y触摸点距离可视化范围的距离
//console.log(ev.position.x, ev.position.y);
console.log(ev.x, ev.y);
//x = disX + ev.position.x-touchDiv.offsetWidth/2;
//y = disY + ev.position.y-touchDiv.offsetHeight/2;
//ev.x，ev.y 参照自己原有位置的偏移量
x=disX+ev.x;
y=disY+ev.y;
this.style.transform="translate("+x+"px,"+y+"px)";
});
touch.on("#touchDiv","dragend",function() {
disX=x;
disY=y;
})
//rotate
var angel=0;
touch.on("#touchDiv","touchstart",function(ev) {
ev.startRotate();
})
touch.on("#touchDiv","rotate",function(ev) {
//console.log("coco")
//console.log(ev.rotation);
var rotate=angel+ev.rotation;
this.innerHTML=rotate;
//fingerStatus手指的状态
//判断手指是不是松了
if(ev.fingerStatus=="end") {
angel=rotate;}
this.style.transform="rotate("+rotate+"deg)";
})
//pinch
//初始比例
var initScale=1;
//新比例
var newScale=0;
touch.on(document,"touchmove",function(ev) {
ev.preventDefault();
})
touch.on("#touchDiv","pinch",function(ev) {
var scale=ev.scale-1;
newScale=scale+initScale;
if(newScale<=0.5) {
newScale=0.5;
}
if(newScale>=2) {
newScale=2;
}
//if (ev.fingerStatus == "end") {
//initScale = newScale;
//}
this.style.transform="scale("+newScale+")";
});
touch.on("#touchDiv","pinchend",function() {
initScale=newScale;
});
五、swiper.js
<script src="js/swiper-3.4.0.min.js"></script>
网友评论