Click handlers

Different approaches to click handling that trigger different behaviors in browsers.

by sperske

HTML

<table>
  <tbody>
    <tr>
      <td>
        <button id='btnCallStack'>
          Open
        </button>
      </td>
      <td><code>BUTTON</code></td>
      <td><code>Call Stack</code></td>
    </tr>
    <tr>
      <td>
        <button id='btnTimeout1000'>
          Open
        </button>
      </td>
      <td><code>BUTTON</code></td>
      <td><code>Timeout (1000ms)</code></td>
    </tr>
    <tr>
      <td>
        <button id='btnTimeout1001'>
          Open
        </button>
      </td>
      <td><code>BUTTON</code></td>
      <td><code>Timeout (1001ms)</code></td>
    </tr>
    <tr>
      <td>
        <a href='https://glossary.googleplex.com/terms?q=External+Click-Through+Rate' id='aLinkCallStack'>
          Direct
        </a>
      </td>
      <td><code>A</code></td>
      <td><code>Call Stack</code></td>
    </tr>
    <tr>
      <td>
        <a href='https://google.com' id='aDiffLinkCallStack'>
          Indirect
        </a>
      </td>
      <td><code>A</code></td>
      <td><code>Call Stack</code></td>
    </tr>
    <tr>
      <td>
        <a href='https://glossary.googleplex.com/terms?q=External+Click-Through+Rate' id='aLinkTimeout1000'>
          Direct
        </a>
      </td>
      <td><code>A</code></td>
      <td><code>Timeout (1000ms)</code></td>
    </tr>
    <tr>
      <td>
        <a href='https://google.com' id='aDiffLinkTimeout1000'>
          Indirect
        </a>
      </td>
      <td><code>A</code></td>
      <td><code>Timeout (1000ms)</code></td>
    </tr>
    <tr>
      <td>
        <a href='https://glossary.googleplex.com/terms?q=External+Click-Through+Rate' id='aLinkTimeout1001'>
          Direct
        </a>
      </td>
      <td><code>A</code></td>
      <td><code>Timeout (1001ms)</code></td>
    </tr>
    <tr>
      <td>
        <a href='https://google.com' id='aDiffLinkTimeout1001'>
          Indirect
        </a>
      </td>
      <td><code>A</code></td>
      <td><code>Timeout (1001ms)</code></td>
    </tr>
    <tr>
      <td>
...

JavaScript

function testStack(url, depth) {
  if (depth > 0) {
    testStack(url, depth - 1);
  } else {
    window.open(url, '_blank');
  }
}

document.getElementById('btnCallStack').onclick = function() {
  testStack(
    'https://glossary.googleplex.com/terms?q=External+Click-Through+Rate',
    100);
}

document.getElementById('btnTimeout1000').onclick = function() {
  setTimeout(function() {
    window.open(
      'https://glossary.googleplex.com/terms?q=External+Click-Through+Rate',
      '_blank');
  }, 1000);
}

document.getElementById('btnTimeout1001').onclick = function() {
  setTimeout(function() {
    window.open(
      'https://glossary.googleplex.com/terms?q=External+Click-Through+Rate',
      '_blank');
  }, 1001);
}

document.getElementById('aLinkCallStack').onclick = function(e) {
  e.preventDefault();
  testStack(
    'https://glossary.googleplex.com/terms?q=External+Click-Through+Rate',
    100);
  return false;
}

document.getElementById('aLinkTimeout1000').onclick = function(e) {
  e.preventDefault();
  setTimeout(function() {
    window.open(
      'https://glossary.googleplex.com/terms?q=External+Click-Through+Rate',
      '_blank');
  }, 1000);
  return false;
}

document.getElementById('aLinkTimeout1001').onclick = function(e) {
  e.preventDefault();
  setTimeout(function() {
    window.open(
      'https://glossary.googleplex.com/terms?q=External+Click-Through+Rate',
      '_blank');
  }, 1001);
  return false;
}


document.getElementById('aDiffLinkCallStack').onclick = function(e) {
  e.preventDefault();
  testStack(
    'https://glossary.googleplex.com/terms?q=External+Click-Through+Rate',
    100);
  return false;
}

document.getElementById('aDiffLinkTimeout1000').onclick = function(e) {
  e.preventDefault();
  setTimeout(function() {
    window.open(
      'https://glossary.googleplex.com/terms?q=External+Click-Through+Rate',
      '_blank');
  }, 1000);
  return false;
}

document.getElementById('aDiffLinkTimeout1001').onclick = function(e) {
 ...