如何在 JavaScript 中監聽三次點擊？

Question

如果這是雙擊：

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

如何捕捉三次點擊？ 這是針對 Google Chrome 中的固定選項卡。

Answer 1

您需要編寫自己的三擊實現，因為不存在連續捕獲3次點擊的本機事件。 幸運的是，現代瀏覽器有event.detail ， MDN文檔描述為 ：

在短時間內發生的連續點擊次數，遞增1。

這意味着您只需檢查此屬性的值並查看它是否為3 ：

window.addEventListener('click', function (evt) {
    if (evt.detail === 3) {
        alert('triple click!');
    }
});

工作演示： http ： //jsfiddle.net/L6d0p4jo/

---

如果您需要支持IE 8，最好的方法是捕獲雙擊，然后進行三次單擊 - 例如：

var timer,          // timer required to reset
    timeout = 200;  // timer reset in ms

window.addEventListener("dblclick", function (evt) {
    timer = setTimeout(function () {
        timer = null;
    }, timeout);
});
window.addEventListener("click", function (evt) {
    if (timer) {
        clearTimeout(timer);
        timer = null;
        executeTripleClickFunction();
    }
});

工作演示： http ： //jsfiddle.net/YDFLV/

原因是舊的IE瀏覽器不會觸發兩次連續點擊事件進行雙擊。 不要忘記使用attachEvent代替IE 8的addEventListener 。

Answer 2

從DOM Level 2開始，您可以使用鼠標單擊處理程序並檢查事件的detail參數，該參數應解釋為：

從UIEvent繼承的detail屬性指示在用戶操作期間在同一屏幕位置上按下和釋放鼠標按鈕的次數。 當用戶開始此操作時，屬性值為1，並且對於按下和釋放的每個完整序列，屬性值增加1。 如果用戶在mousedown和mouseup之間移動鼠標，則該值將設置為0，表示沒有發生單擊。

因此， detail === 3的值將為您提供三擊事件。

有關規范的更多信息， 請參見http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-MouseEvent 。

感謝@Nayuki https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/detail - 一個DOM3擴展，它是WIP https://w3c.github.io/uievents/

Answer 3

這是真正的三擊事件，只有當所有三次點擊以相等的間隔觸發時才觸發。

 // Default settings var minClickInterval = 100, maxClickInterval = 500, minPercentThird = 85.0, maxPercentThird = 130.0; // Runtime var hasOne = false, hasTwo = false, time = [0, 0, 0], diff = [0, 0]; $('#btn').on('click', function() { var now = Date.now(); // Clear runtime after timeout fot the 2nd click if (time[1] && now - time[1] >= maxClickInterval) { clearRuntime(); } // Clear runtime after timeout fot the 3rd click if (time[0] && time[1] && now - time[0] >= maxClickInterval) { clearRuntime(); } // Catch the third click if (hasTwo) { time[2] = Date.now(); diff[1] = time[2] - time[1]; var deltaPercent = 100.0 * (diff[1] / diff[0]); if (deltaPercent >= minPercentThird && deltaPercent <= maxPercentThird) { alert("Triple Click!"); } clearRuntime(); } // Catch the first click else if (!hasOne) { hasOne = true; time[0] = Date.now(); } // Catch the second click else if (hasOne) { time[1] = Date.now(); diff[0] = time[1] - time[0]; (diff[0] >= minClickInterval && diff[0] <= maxClickInterval) ? hasTwo = true : clearRuntime(); } }); var clearRuntime = function() { hasOne = false; hasTwo = false; time[0] = 0; time[1] = 0; time[2] = 0; diff[0] = 0; diff[1] = 0; }; 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> Click button three times with equal interval <button id="btn">Click me</button> 

另外，我編寫了jquery插件TrplClick ，它啟用了'trplclick'事件

Answer 4

如果你做得對，這很簡單，你甚至可以隨心所欲地捕捉單次，雙次，三次......點擊。 普通的javascript，可定制的點擊延遲（超時）：

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);
});

Answer 5

偽代碼：

var clicks = 0

onclick:
clicks++;
setTimer(resetClicksToZero);
if clicks == 3: tripleclickdetected(); clicks = 0;

Answer 6

我正在開發一個javascript代碼編輯器，我不得不聽三重點擊，這里的解決方案適用於大多數瀏覽器：

// Function to get mouse position
var getMousePosition = function (mouseEvent) {
    var currentObject = container;
    var currentLeft = 0;
    var currentTop = 0;
    do {
        currentLeft += currentObject.offsetLeft;
        currentTop += currentObject.offsetTop;
        currentObject = currentObject.offsetParent;
    } while (currentObject != document.body);
    return {
        x: mouseEvent.pageX - currentLeft,
        y: mouseEvent.pageY - currentTop
    }
}

// We will need a counter, the old position and a timer
var clickCounter = 0;
var clickPosition = {
    x: null,
    y: null
};
var clickTimer;

// The listener (container may be any HTML element)
container.addEventListener('click', function (event) {

    // Get the current mouse position
    var mousePosition = getMousePosition(event);

    // Function to reset the data
    var resetClick = function () {
        clickCounter = 0;
        var clickPosition = {
            x: null,
            y: null
        };
    }

    // Function to wait for the next click
    var conserveClick = function () {
        clickPosition = mousePosition;
        clearTimeout(clickTimer);
        clickTimer = setTimeout(resetClick, 250);
    }

    // If position has not changed
    if (clickCounter && clickPosition.x == mousePosition.x && clickPosition.y == mousePosition.y) {
        clickCounter++;
        if (clickCounter == 2) {
            // Do something on double click
        } else {
            // Do something on triple click
            resetClick();
        }
        conserveClick();
    } else {
        // Do something on single click
        conserveClick();
    }
});

在Firefox 12，Google Chrome 19，Opera 11.64，Internet Explorer 9上測試過

此方法檢查用戶是否未更改光標位置，單擊或雙擊時仍可執行某些操作。 希望這個解決方案能夠幫助每個需要實現三擊事件監聽器的人:)

Answer 7

可配置的 n-clicks 事件檢測器工廠

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
      }
    }
  }
  
}

用法

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

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