title: Javascript - Disable multitouch
body: <p>I'm trying to block multitouch on my 1920x1080 touchscreen.</p>
  
  <pre><code>this.el.addEventListener('touchstart', function (e) {
  
    if (this.multiTouch.disable(e)) {
  
      this.triggerTouch(e);
  
    }
  
  }.bind(this));
  </code></pre>
  
  <p>The <code>multiTouch.disable</code> function returns true or false. This is the function: </p>
  
  <pre><code>disable: function (e) {
  
    if (e.touches.length &gt; 1 || e.targetTouches.length &gt; 1) {
  
      e.preventDefault();
      e.stopPropagation();
      e.stopImmediatePropagation();
  
      return false;
  
    } else {
  
      return true;
  
    }
  
  }
  </code></pre>
  
  <p>So in this function I check how many touches are registered. If there is more than one touch registered it's multitouch so it should be blocked.</p>
  
  <p>But when I add the following statement to the <code>this.el</code> eventlistener <code>console.log(this.multiTouch.disable(e))</code> I get logs like this:</p>
  
  <pre><code>true TouchPoint.js:36
  (11) false TouchPoint.js:36
  true TouchPoint.js:36
  10false TouchPoint.js:36
  true TouchPoint.js:36
  (7) false TouchPoint.js:36
  true TouchPoint.js:36
  (6) false TouchPoint.js:36
  true TouchPoint.js:36
  (8) false TouchPoint.js:36
  true TouchPoint.js:36
  (7) false TouchPoint.js:36
  true TouchPoint.js:36
  (6) false TouchPoint.js:36
  </code></pre>
  
  <p>This is when touching the screen with three or more fingers. The first touchstart always registers only one touch, so the disable function will always return true the first time.</p>
  
  <p>How can I correctly block multitouch with JavaScript?</p>