Tuple-Click

Easy-peasy-lemon-squeezy JavaScript triple-clicks, quadruple-clicks, quintuple-clicks, sextuple-clicks, septuple-clicks, octuple-clicks, nonuple-clicks, decuple-clicks, undecuple-clicks, duodecuple-clicks, tredecuple-clicks, ... even centuple-clicks!

by Terry Young

HTML

<section class="demo">

  <h3>Demo</h3>

  <div>Choose: 
    <select id="tuple">
      <option value="2">Double-Click</option>
      <option value="3" selected>Triple-Click</option>
      <option value="4">Quadruple-Click</option>
      <option value="5">Quintuple-Click</option>
      <option value="6">Sextuple-Click</option>
      <option value="7">Septuple-Click</option>
      <option value="8">Octuple-Click</option>
      <option value="9">Nonuple-Click</option>
      <option value="10">Decuple-Click</option>
      <option value="11">Undecuple-Click</option>
      <option value="12">Duodecuple-Click</option>
      <option value="13">Tredecuple-Click</option>
      <option value="100">Centuple-Click</option>
    </select>
  </div>

  <br><br>

  <span id="clickme"></span> <span id="result"></span>

  <h3>Sample Usage</h3>

  <pre id="sample">
  // Sample Code using the awesome VanillaJS framework

  function handleMe (event) {
    // <span class="tuple_comment"></span>
    if (<strong>event.detail</strong> == <span class="tuple_count"></span>) {
      // Do your stuff here
    }
  }

  var el = document.getElementById('clickme');
  
  el.addEventListener('click', handleMe);



  // Sample Code using jQuery

  $('#clickme').on('click', function (event) {  
    // <span class="tuple_comment"></span>
    if (<strong>event.originalEvent.detail</strong> == <span class="tuple_count"></span>) {
      // Do your stuff here
    }
  });
  </pre>

  <h3>Notes</h3>

  <p>
  Modern browsers have <strong>event.detail</strong>, which the <a href="https://developer.mozilla.org/en-US/docs/Web/Events/click#Properties" target="_blank">MDN documentation describes as</a>: "A count of consecutive clicks that happened in a short amount of time, incremented by one."
  </p>
  
  <p>
  Also note that old IE browsers such as IE8 (if anyone still cares) will not fire two consecutive click events for a double click. 
  </p>
  
  <br><br>
</section>

CSS

section.demo {
  font-family: "Lucida Console", Monaco, monospace;
  font-size: 14px;
}

section.demo strong {
  color: red;
}

#clickme {
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    border-radius: 3px;
    font-size: 16px;
    font-family: "Lucida Console", Monaco, monospace;
    cursor: pointer;
    
    -webkit-user-select: none;  /* Chrome all / Safari all */
    user-select: none;
  }

JavaScript

$(document).ready(function () {

	var timer = null;

	$('#clickme').on('click', function (event) {
  	var $option = $('#tuple option:selected');
  	var tuple = parseInt($option.val());
  
  	if (event.originalEvent.detail == tuple) {
    
    	if (timer) {
      	clearTimeout(timer);
        timer = null;
      }
      
      $('#result').html('You ' + $option.text() + 'ed me!');
      
      timer = setTimeout(function () {
      	$('#result').empty();
      }, 2000);
      
    }
  });
  
  $('#tuple')
    .on('change', function (event) {
      var $options = $(this).find(':selected');
      var text = $options.text();
      var times = $options.val();
      $('#clickme').text(text + ' Me (i.e. ' + times + ')');
      $('.tuple_count').text(times);
      $('.tuple_comment').text(text);
    })
    .trigger('change');
  
});