觸摸屏按住

Question

我希望用戶能夠觸摸並按住一個按鈕，並在一段時間后調用一個函數。

例如，按鈕文本開始為黑色，按下 0.2 秒后變為橙色，按下 0.5 秒后變為綠色。 如果它是綠色的，則會觸發一個函數 myFunction()。

我已經開始了，我們將不勝感激。 謝謝 ：）

 var btn = document.getElementById("pressBtn"); var pressedTime = 0; var elaspedHoldTime; btn.onmousedown = function() { if (pressedTime != 0) { pressedTime = performance.now(); } else { elaspedHoldTime = performance.now() - pressedTime; } if (elaspedHoldTime > 200) { btn.style.color = "orange"; } if (elaspedHoldTime > 1000) { btn.style.color = "green"; } }; btn.addEventListener("mouseup", function() { elaspedHoldTime = performance.now() - pressedTime; btn.style.color = "black"; if (elaspedHoldTime > 500) { console.log("Call Function Here"); } pressedTime = 0; elaspedHoldTime = 0; });

 <button id="btn">Button Text</button>

（由於某種原因它也有一個錯誤）

Answer 1

您可以在 Javascript 中使用該mousedown和setTimeout

在setTimeout 中，第一個爭論是必須運行什么函數，其次是它應該何時運行，

在你的情況下，在 JavaScript 中setTimeout 1000 是 1 秒

0.5 秒 = 500

0.2s = 200

我還使用mouseup來恢復正常的按鈕樣式

 const btn = document.querySelector(".btn") const triggerButton = () => { setTimeout(() => { btn.className = 'btn orange' }, 200) setTimeout(() => { btn.className = 'btn red' console.log("Triggered") }, 500) } btn.addEventListener("mouseup", () => { btn.className = 'btn' }) btn.addEventListener("mousedown", triggerButton)

 .btn.orange{ background: orange; } .btn.red{ background: red; }

 <button class="btn">Click</button>

Answer 2

如果您是為觸摸屏制作的，則需要使用ontouch事件：

ontouchstart -> when something is being pressed by a finger
ontouchmove -> the active finger moves of the target
ontouchcancel -> when the the target has lost focus of a touch event
ontouchend -> lifting the finger of the target

MouseEvents保留用於鼠標/觸控板控制的設備，例如計算機。

TouchEvents保留用於觸摸屏設備，例如平板電腦和手機。

另請閱讀上面的代碼答案。

Answer 3

mousedown , mouseup , touchstart , touchend只在按鍵被按下時觸發一次。

要檢查，如果用戶仍然持有它，您需要檢查setTimeout()函數調用或僅在按下時運行的setInterval()函數調用中是否存在真正的變量。

例如：

let pressed = false;
button.addEventListener("mousedown", () => {
  pressed = true;
  setTimeout(() => {
    if (pressed) { ... }
  }, 200);
});
button.addEventListener("mouseup", () => { pressed = false; });

由於setTimeout()已經有答案，這里是setInterval()另一個解決方案。

 let vars = { interval: null, // used to store the interval id start: 0, // changes to Date.now() on every start. // used to avoid myFunction be called more than once per "hold" myFunctionCalled: false }, myFunction = () => console.log("Yes...?"); button.addEventListener("mousedown", (event) => { // avoid start w/ rightclick if (event.which == 1) { vars.start = Date.now(); vars.myFunctionCalled = false; vars.interval = setInterval(() => { let dur = Date.now() - vars.start; if (dur > 1000) { button.style.color = "green"; if (!vars.myFunctionCalled) { vars.myFunctionCalled = true; myFunction(); } } else if (dur > 500) { button.style.color = "orange"; } else if (dur > 100) { button.style.color = "red"; } }, 10); } }); // using window, so the user can move the mouse window.addEventListener("mouseup", (event) => { // checking again for the mouse key, to avoid disabling it on rightlick if (vars.interval && event.which == 1) { // stop the interval and reset the color to default clearInterval(vars.interval); button.style.color = ""; vars.interval = null; } })

 <button id="button">Hold me</button>