|
移動(dòng)端事件有哪些： 觸摸事件 手勢(shì)事件 傳感器事件 （后面兩個(gè)兼容性不怎么樣，因此重點(diǎn)就是觸摸事件）
觸摸事件： touch 事件 pointer 事件 （PC端可能會(huì)使用jQuery做動(dòng)畫，移動(dòng)端一般不會(huì)，基本都是使用css3做動(dòng)畫）
ontouchstart （必須在元素內(nèi)部才能觸發(fā)） ontouchmove （元素內(nèi)外都能觸發(fā)） ontouchend （元素內(nèi)外都能觸發(fā)） ontouchcancel 觸摸中斷，多用于系統(tǒng)級(jí)處理，比如在觸摸時(shí)突然接了個(gè)電話（一般幾乎是用不上的）
推薦使用 addEventListener 來綁定事件，除非因?yàn)榧嫒菪栽蚴褂?on <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>touch</title>
<style>
.box{
width:200px;
height:200px;
background:pink;
margin:20px auto;
}
</style>
</head>
<body>
<div class="box" id="box">
</div>
<script>
var box=document.getElementById("box");
// box.ontouchstart=handleStart;
// box.ontouchmove=handleMove;
// box.ontouchend=handleEnd;
box.addEventListener("touchstart",handleStart,false);
box.addEventListener("touchmove",handleMove,false);
box.addEventListener("touchend",handleEnd,false);
function handleStart(){
console.log("touchstart");
}
function handleMove(){
console.log("touchmove");
}
function handleEnd(){
console.log("touchend");
}
</script>
</body>
</html>
touch事件的event對(duì)象 比較重要的屬性 type: "touchstart" 觸發(fā)的事件 target: div#box.box 觸摸的元素
changedTouches: TouchList {0: Touch, length: 1} 發(fā)生變化的觸摸點(diǎn) targetTouches: TouchList 目標(biāo)元素上的觸摸點(diǎn) touches: TouchList {0: Touch, length: 1} 所有觸摸點(diǎn)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>touch</title> <style> .box{ width:200px; height:200px; background:pink; margin:20px auto; } </style> </head> <body> <div class="box" id="box"> </div> <script> var box=document.getElementById("box"); // box.ontouchstart=handleStart; // box.ontouchmove=handleMove; // box.ontouchend=handleEnd; box.addEventListener("touchstart",handleStart,false); box.addEventListener("touchmove",handleMove,false); box.addEventListener("touchend",handleEnd,false); function handleStart(e){ console.log("touchstart"); console.log(e.changedTouches[0]); } function handleMove(e){ console.log("touchmove"); console.log(e); } function handleEnd(e){ console.log("touchend"); console.log(e); } </script> </body> </html>
clientX clientY 指視口到觸摸點(diǎn)的距離（不包括滾動(dòng)距離） pageX pageY 視口到觸摸點(diǎn)的距離（包括滾動(dòng)距離）
單指拖拽案例： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>touch</title> <style> .backtop{ width:90px; height:90px; position: fixed; bottom:20px; right:20px; line-height:90px; text-align: center; background:rgba(0,0,0,.6); border-radius:50%; color:#fff; font-size:60px; -webkit-tap-highlight-color:transparent; /*transform:translate3d(x,y,0);在移動(dòng)端使用會(huì)開啟GPU加速，會(huì)讓動(dòng)畫性能變高*/ } </style> </head> <body> <a href="#" id="backtop" class="backtop">↑</a> <script> function drag(el,options){ options.x=typeof options.x!=="undefined"?options.x:true; options.y=typeof options.y!=="undefined"?options.y:true; if(!options.x&&!options.y) return; var curPoint={ x:0, y:0 }; var startPoint={}; var isTouchMove=false; el.addEventListener("touchstart",handleStart,false); el.addEventListener("touchmove",handleMove,false); el.addEventListener("touchend",handleEnd,false); function handleStart(e){ var touch=e.changedTouches[0]; startPoint.x=touch.pageX; startPoint.y=touch.pageY; } function handleMove(e){ e.preventDefault();//阻止默認(rèn)行為（滾動(dòng)條滾動(dòng)） isTouchMove=true; var touch=e.changedTouches[0]; var diffPoint={};//要移動(dòng)的距離 var movePoint={//移動(dòng)之后的距離 x:0, y:0 }; diffPoint.x=touch.pageX-startPoint.x; diffPoint.y=touch.pageY-startPoint.y; if(options.x){ movePoint.x=diffPoint.x+curPoint.x;//移動(dòng)之后的距離=要移動(dòng)的距離+當(dāng)前距離 } if(options.y){ movePoint.y=diffPoint.y+curPoint.y; } move(el,movePoint.x,movePoint.y); } function handleEnd(e){ if(!isTouchMove) return; var touch=e.changedTouches[0]; curPoint.x+=touch.pageX-startPoint.x;//更新當(dāng)前位置 curPoint.y+=touch.pageY-startPoint.y; isTouchMove=false; } function move(el,x,y){ x=x||0; y=y||0; el.style.transform="translate3d("+x+"px,"+y+"px,0)"; } } var backtop=document.getElementById("backtop"); drag(backtop,{ x:true, y:true }); </script> </body> </html>
|
|
|
