我如何聆听JavaScript的三重点击？
如果这是双击：
window.addEventListener("dblclick", function(event) { }, false); 我怎样才能捕捉到三击？ 这是Google Chrome中的固定选项卡。
您需要编写自己的三连击实现，因为没有本地事件可以连续捕获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 。
由于DOM级别2，您可以使用鼠标单击处理程序，并检查应解释为的事件的detail参数：
从UIEventinheritance的detail属性指示在用户操作期间鼠标button被按下并释放在同一屏幕位置上的次数。 当用户开始这个动作时，属性值为1，对于每个完整的按压和释放顺序，增加1。 如果用户在mousedown和mouseup之间移动鼠标，该值将被设置为0，表示没有发生点击。
所以detail === 3的值会给你三连击事件。
更多信息参见http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-MouseEvent 。
这里是真正的三重点击事件，只有当三次点击都以相同的时间间隔触发时才会触发。
// 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>
var clicks = 0 onclick: clicks++; setTimer(resetClicksToZero); if clicks == 3: tripleclickdetected(); clicks = 0;
我在JavaScript代码编辑器上工作，我不得不听三重点击，这是适用于大多数浏览器的解决scheme：
// 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(); } });
testingFirefox 12，谷歌Chrome 19，Opera 11.64，Internet Explorer 9
这种方法检查用户是否没有改变光标的位置，当你单击或双击时，你仍然可以做一些事情。 希望这个解决scheme能够帮助所有需要实现三重点击事件监听的人:)
