How do I listen for triple clicks in JavaScript?

Viewed 31113

If this is for a double-click:

window.addEventListener("dblclick", function(event) { }, false);

How can I capture a triple-click? This is for a pinned tab in Google Chrome.

7 Answers

it's very simple if you do it right, and you can even catch single, double, triple, ... clicks as you like. plain javascript, customizable click delay (timeout):

var clicks = 0;
var timer, timeout = 350; // time between each click

var doubleClick = function(e) {
  console.log('doubleClick');
}

var tripleClick = function(e) {
  console.log('tripleClick');
}

// click timer
yourcontainer.addEventListener('click', function(e) {
  clearTimeout(timer);
  clicks++;
  var evt = e;
  timer = setTimeout(function() {
    if(clicks==2) doubleClick(evt);
    if(clicks==3) tripleClick(evt);
    clicks = 0;
  }, timeout);
});

Configurable n-clicks event detector factory

const nClicks = (minClickStreak, maxClickInterval = 500, resetImmediately = true) => {
  let timerId = 0
  let clickCount = 0
  let lastTarget = null
  const reset = () => {
    timerId = 0
    clickCount = 0
    lastTarget = null
  }
  
  return (originalEventHandler) => (e) => {
    if (lastTarget == null || lastTarget == e.target) { // 2. unless we clicked same target
      clickCount++ // 3. then increment click count
      clearTimeout(timerId)
    }
    lastTarget = e.target
    timerId = setTimeout(reset, maxClickInterval) // 1. reset state within set time
    if (clickCount >= minClickStreak) {
      originalEventHandler(e)
      if (resetImmediately) {
        clickCount = 0
      }
    }
  }
  
}

Usage

  table.addEventListener('click', nClicks(2)(e => { // double click
    selectCell(e.target)
  }))

  table.addEventListener('click', nClicks(3)(e => { // triple click
    selectRow(e.target)
  }))
Related