js移动端事件

1.触摸事件
click事件多用于pc端,在移动端有延迟

touchstart() //手指触摸屏幕
touchmove() //手指在屏幕上移动
touchend() //手指离开屏幕
touchcancle() //触摸被系统事件终段

var d1 = document.getElementById("d1");
d1.addEventListener("touchstart",function(){
    console.log("触摸了");
    event.touches;
    //获取其中的一个触摸点 touches[0]
    var t = event.touches[0];

    /*
     * clientX / clientY
     * screenX / screntY
     * pageX / pageY
     */
    d1.innerHTML = "x:"+t.pageX+"\ny:"+t.pageY;

},false);

d1.addEventListener("touchmove",function(){
    d1.innerHTML +="触摸滑动";
})

d1.addEventListener("touchend",function(){
    d1.innerHTML += "触摸结束";
});

2.移动端对比PC端需要考虑性能优化:
实现动画时:
1.改变元素的位置,尽量不要使用定位修改left,top属性,推荐transform属性,渲染性能更好动画相比更流畅
2.移动端动画时,尽量游戏考虑使用css动画,若使用JS动画实现,则尽量避免使用计时器,优先考虑requestAnimationFrame()

var d2 = document.getElementById("d2");
var w=0;
function test(){
    w++;
    if(w<100){
        window.requestAnimationFrame(test);
    }
    d2.style.width = w + "%";
}

requestAnimationFrame(test);

3.requestAnimationFrame() 区别于计时器
1.不需要设置时间间隔,默认安装浏览器刷新频率
2.当窗口处于闲置状态,会自动暂停当前的动画;节省浏览器消耗,优化内存.如果窗口恢复计划状态动画会继续