关于touch事件对于质量的影响爱博体育app

下一场监听touchmove事件:

function updateTouches(e) {
  touches = e.preventDefault();
}

$(“body”).on(“touchstart”, function(e) {
  e.preventDefault();
  startX = e.originalEvent.changedTouches[0].pageX,
  startY = e.originalEvent.changedTouches[0].pageY;
});

   
即使那样子无法完完全全移除卡顿的光景,平时那和整个页面结构,以及js深入分析和css渲染紧凑相关,可是,这样子的确能够大大的优化利用touch时候的习性。

window.requestAnimationFrame(renderEverything);

    第叁回写博文,不足之处请大家指教,小编必然虚心接受!

document.addEventListener(‘touchmove’, updateTouches);

  if ( Math.abs(X) > Math.abs(Y) && X > 0 ) {
    //你要渲染的页面
  }

$(“body”).on(“touchstart”, function(e) {
  document.addEventListener(‘touchmove’, updateTouches);
  startX = e.originalEvent.changedTouches[0].pageX,
  startY = e.originalEvent.changedTouches[0].pageY;
});

这段代码意思是,当小编手指触碰在手提式有线电话机显示器时,从左滑到左臂,会触发alert事件,但是我们看到了某些方法未有,对,没有错,那就是e.preventDefault();只要接触二次touchmove,他就能够做二遍判别,裁撤body的默许行为,那那标准势必会有总体性难题,所以,大家无妨把e.preventDefault()保存到二个变量中:

});

window.requestAnimationFrame(renderEverything);

    然后,那几个标题也不是不可能博得缓和,先附上一段代码:

此间大家队这几个形式传入了三个renderEverything的函数参数,这几个函数里面就是touchmove事件实际要干的思想政治工作:

 

$(“body”).on(“touchmove”, function(e) {
  e.preventDefault();
  moveEndX = e.originalEvent.changedTouches[0].pageX,
  moveEndY = e.originalEvent.changedTouches[0].pageY,
  X = moveEndX – startX,
  Y = moveEndY – startY;

    第三遍写博客随笔,废话非常的少说,直接步入正题。

接下来用windows的requestAnimationFrame,能够让动画更通畅,运维质量更加高,通过requestAnimationFrame来更新渲染页面。当然,若是你想包容各类浏览器,需求对两样的浏览器判别是或不是扶助那几个艺术,这里大家要是浏览器援助那几个格局。

   
近期直接小心于移动终端的支出,遇到了三个比较劳苦的事体,正是touch事件,我们都掌握,touch事件有两种,无非正是touchstart,touchmove,touchend,touchstart和touchend应该算是单次触发式的风云,而touchmove因为是手指触碰之后,能够不断触发的事件,然后,每一次触发贰次照旧说是某一段的touchmove的时候,也正是在一再拓展js深入分析和执行,那样,会阻塞页面渲染,比方,小编touchmove触发一段,然后渲染一次html页面,然后本身手指按着不放,步向第二段touchmove事件,这年,从第壹次的html渲染到第贰遍的html渲染之间,会有不通现象,短期的触及幸而,恐怕以为到不到,然后倘令你要求长日子去接触的话,就能够很明朗的觉的卡顿,万一你的手提式有线电话机配置不高,质量糟糕的话,那就能够卡的不用不要的!

function updateTouches(event) {
  touches = event.touches;
}

function renderEverything() {
  //这里就是你要做的政工
}

function renderEverything() {
  $(“body”).on(“touchmove”, function(e) {
    moveEndX = e.originalEvent.changedTouches[0].pageX,
    moveEndY = e.originalEvent.changedTouches[0].pageY,
    X = moveEndX – startX,
    Y = moveEndY – startY;
    if (Math.abs(X) > Math.abs(Y) && X > 0) {
    //你要渲染的页面
    }
  })
}

咱俩把上述代码结合起来:

相关文章