Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<meta name="viewport" content="width=device-width">
<h3>Touch delay test (user-scalable=yes)</h3>
<p>See also <a href="http://jsbin.com/exAdATa/2">user-scalable=no version</a>.</p>
<p>
  clicks: <output>0</output><br>
  latest delay: <output>n/a</output> ms<br>
  <span style="font-size: smaller; color: #666;">(please ignore occasional outliers; the touch event detection is not entirely robust)</span>
</p>
<br>
<p><a href="javascript:void(0)">Click this link</a><br></p>
<br>
<p><button>Click this button</button></p>
<br>
<p><label><input type="checkbox"> Click this text (the label of the checkbox)</label>
<script>
  var outputs = document.getElementsByTagName("output");
  var count = outputs[0];
  var delay = outputs[1];
  var touchstartTimestamp = -1;
  var clickable = document.querySelectorAll('a[href], button, label');
  for (var i = 0; i < clickable.length; i++) {
    clickable[i].addEventListener("touchend", function() {
      touchstartTimestamp = performance.now();
    }, false);
    clickable[i].addEventListener("touchcancel", function() {
      touchstartTimestamp = performance.now();
    }, false);
    clickable[i].addEventListener("click", function(ev) {
      if (ev.target != this)
        return;
      var delta = performance.now() - touchstartTimestamp;
      if (delta > 400)
        delta = "??? (" + delta + ")";
      count.value = parseInt(count.value) + 1;
      delay.value = delta;
    }, false);
  }
</script>
<p>Lorem</p><p>ipsum</p><p>dolor</p><p>sit</p><p>amet,</p><p>consectetur</p><p>adipisicing</p><p>elit,</p><p>sed</p><p>do</p><p>eiusmod</p><p>tempor</p><p>incididunt</p><p>ut</p><p>labore</p><p>et</p><p>dolore</p><p>magna</p><p>aliqua.</p>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
johnmellorpro
0viewers