在原版中點擊並按住事件 javascript

Question

我希望能夠將一個 function 附加到一個元素上，該元素只有在該元素上被點擊一段時間后才會運行。

在 javascript 中有幾個（ 1 、 2 、 3 ）與處理鼠標保持相關的問題； 但這些問題要么使用 jQuery，要么與更具體的用例相關。

我想實現一些更通用的東西，我覺得應該有一個關於堆棧溢出的好答案來解決這個問題。

Answer 1

這是我使用window.setTimeout得到的：

  var mouseTimer; var myVar; function mouseDown() { mouseTimer = window.setTimeout(myFunction,500); //set timeout to fire in 2 seconds when the user presses mouse button down } function myFunction(){ myVar = true;} var div = document.getElementById("testBtn"); testBtn.addEventListener("mousedown", mouseDown); document.body.addEventListener("mouseup", removeTimer); function removeTimer(){ if(myVar) console.log("a"); if (mouseTimer) window.clearTimeout(mouseTimer); myVar = false; } 

 <button id="testBtn">Test</button> 

Answer 2

 function handleClickHold(el, timeout, callback) { let startTime; const mouseDown = () => (startTime = Date.now()); const mouseUp = (e) => Date.now() - startTime > timeout && callback(Date.now() - startTime); el.addEventListener("mousedown", mouseDown); el.addEventListener("mouseup", mouseUp); } const timeout = 500 // time in ms const btn = document.querySelector('button'); const callback = (ms) => console.log('Held Button for ' + ms + ' ms') handleClickHold(btn, timeout, callback);

 <button>Click</button>

如果你想要更通用的東西，你可以像這樣使用 function。 采用一個元素、一個超時和一個回調，因此您可以在不同的情況下應用它。 您也可以將事件傳遞給回調。

Answer 3

盡管感覺很冗長，但這是一種方法：

 const addHoldListener = (element, f, timeout) => { let down = 0; let up = 0; const upListener = () => { up = Date.now(); const diff = up - down; if (diff >= timeout) { f(); } element.removeEventListener('mouseup', upListener); }; const downListener = () => { down = Date.now(); element.addEventListener('mouseup', upListener); }; element.addEventListener('mousedown', downListener); }; addHoldListener( document.querySelector('button'), () => console.log('a'), 500 ) 

 <button>Test</button>