title: touchEvent.touches.length returns always 1 on Android
body: <p>It's the first time I am dealing with touch devices, and to implement some basic functions in my website/webapp, I would need to manage touch events.<br></p>
  
  <p>In the flow of my application, after having dynamically created a div, I attach to it a touchstart event calling a function in which I wish to manage different tasks upon the number of simultaneous touches: in order to do this I thought to use the touchEvent.changedTouches.length property<br>  (<a href="https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent/changedTouches" rel="nofollow noreferrer">https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent/changedTouches</a>).<br></p>
  
  <p>I have something like this:</p>
  
  <pre><code>$("body").append("&lt;div id='myDiv'&gt;Some text...&lt;/div&gt;");
  touchEvents();
  ...
  function touchEvents() {
      var touches;
      $("#myDiv").on("touchstart", function (e) {
          touches = e.changedTouches;
          alert(touches.length);
          switch (touches.length) {
              case 1:
              {code_block_1}
              break;
              case 2:
              {code_block_2}
              break;
              default:
              {code_block_default}
          }
      });
  }
  ...
  </code></pre>
  
  <p>When I run it with Safari on Ios (IPad 2), if I touch it with one, two (or more - till 9) finger(s) I get, from alert statement, the correct number of finger(s) used, and the application then correctly runs, if I have done a two finger touch, into the switch case: 2.<br></p>
  
  <p>But <strong>when I use an Android device</strong> (I tested it with a Samsung and an NGM branded phones - either older and newest Android phones - either with updated Firefox and Chrome) <strong>I always get "1"</strong> by the alert() called just after the touchstart event, <strong>even if I use more than one finger</strong>; consequently the route goes always inside the switch case: 1 option.<br></p>
  
  <p>I discovered that this seems to be due to a strange behaviour of the touchEvent.touches list.<br> </p>
  
  <p>As a matter of fact, if I have the following code<br></p>
  
  <pre><code>$("body").append("&lt;div id='myDiv'&gt;Some text...&lt;/div&gt;");
  touchEvents();
  ...
  function touchEvents() {
      var touches;
      $("#myDiv").on("touchstart", function (e) {
          touches = e.touches;
          alert(touches.length);
          ...
      });
  }
  </code></pre>
  
  <p>if I touch the surface with 2 fingers (at the same time or one after the other) I always get two alerts!<br></p>
  
  <p>(when fingers move down one after the other I also get a first alert correctly saying "1")...<br></p>
  
  <p>The first one (the second in the case the 2 fingers touch is not simultaneous) prompts "2", but immediately after closing this alert, another one is fired prompting "1".<br></p>
  
  <p>As a check I also tried to copy and past the example code that can be found here:<br></p>
  
  <p><a href="https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent/touches" rel="nofollow noreferrer">https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent/touches</a><br></p>
  
  <p>adding three functions that alert the e.touches.length i.e.<br></p>
  
  <pre><code>$(document).ready(function() {
      document.getElementById("test").addEventListener('touchstart', function(e) {
          // Invoke the appropriate handler depending on the
          // number of touch points.
          switch (e.touches.length) {
              case 1: handle_one_touch(e); break;
              case 2: handle_two_touches(e); break;
              case 3: handle_three_touches(e); break;
              default: console.log("Not supported"); break;
          }
      }, false);
      function handle_one_touch(e) {
          touches = e.touches;
          alert(touches.length);
      }
      function handle_two_touch(e) {
          touches = e.touches;
          alert(touches.length);
      }
      function handle_three_touch(e) {
          touches = e.touches;
          alert(touches.length);
      }
  });
  </code></pre>
  
  <p>and I always get "1", so it is always called only the handle_one_touch(e) function.<br></p>
  
  <p>As a consequence, I think, the changedTouches.length property is always "1". <br></p>
  
  <p>Does someone know if there is a known issue about this matter on Android devices and/or how to solve it?<br>
  Thank you in advance, Federico</p>