Home / Questions / 192424
Accepted
lromeraj
Asked: 2020-08-30 05:55:43 +0800 CST 2020-08-30 05:55:43 +0800 CST

Why does the frequency of execution of the touchmove event decrease when using two or more fingers?

  • 772

I'm trying to handle the translation and scaling of a canvas through gestures, so far I've only been able to implement the translation because of the following: I've noticed that when I use two fingers or more , the event's trigger frequency (in In this case touchmove ) decreases considerably , but it only happens if the distance between the positions of the touches varies , that is, if I put two fingers on the screen and both move them the same (keeping the same distance between the fingers ) the event is fired correctly, but on the other hand, if at the same time that I move my fingers, I join them and move them away , that is when thatvariation in the trigger frequency of the event , the code is as follows:

(function( d ) {

   var evts = {
     start: 'touchstart',
     move: 'touchmove',
     end: 'touchend'
   };

   var old = {
     tchs: [],
     trans: {
       x: 0,
       y: 0
     }
   };

   var tchs = [];

   function start( e ) {

     tchs = [];
     old.tchs = e.touches;

     old.trans.x = DRAWER.trans.x;
     old.trans.y = DRAWER.trans.y;

   }

   var tOld; //esto lo estoy usando para comprobar
   //el tiempo que tarda en dispararse cada evento "touchmove"

   function move( e ) {
     let tNow = Date.now();
     console.log( tNow - tOld );
     tchs = e.touches;
     tOld = tNow;
   }


   function renderTchs() { //gestionar los toques

     if (tchs.length == 1) {
       let tx = old.trans.x + (tchs[0].clientX - old.tchs[0].clientX);
       let ty = old.trans.y + (tchs[0].clientY - old.tchs[0].clientY);

       DRAWER.setTrans( tx, ty );
     }


     //aquí trabajaría también la escala, 
     //pero al usar dos dedos me ocurre el retardo 
     //y antes de implementarlo quiero saber por qué ocurre

     window.requestAnimationFrame( renderTchs );

   }

   renderTchs();

   d.body.addEventListener(evts.start,( e ) => {
     tOld = Date.now();
     start( e );
   },false);
   d.body.addEventListener(evts.move,move,false);
   //d.body.addEventListener(evts.end,end,false);

   d.body.addEventListener('touchmove',( e ) => {
     e.preventDefault();
   });

 })( document );

event delay

As shown in the console the event starts firing every 200ms or so, that's excessive and causes the supposed scaling (not yet implemented) to occur in fits and starts .

In <head>the page I have set this:

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

And from CSS these lines:

html, body {
  position: absolute;
  background: #333;
  overflow: hidden; /* Evitar recargar la página deslizando hacia abajo en Android Chrome */
}
canvas {
  position: fixed;
  top: 0;
  left: 0;
}

I hope I have expressed myself clearly enough, if someone could clarify what is happening I would appreciate it.

javascript

1 Answers

  1. Best Answer

    Digging a bit, I started looking in the Chrome flags with the word "touch" and I found this:

    Well, by changing the value to Enabled , the event was already fired correctly, but as soon as I saw this, I realized that it was far from necessary to change any Chrome flag and it is as simple as doing the following :

    document.addEventListener('touchmove',( e ) => {
    e.preventDefault(); //=> prevenimos las acciones por defecto
    //...el evento ya no sufre retardos!!!
},{passive: false}); //=> deshabilitamos la pasividad

    I found the explanation of the Passive Event Listeners here , and I more or less understood that the browser itself was causing those hangs/delays on purpose when the passive mode was activated .

    Hope that helps!

    • 2