HTML onmousedown 事件在移动设备上不起作用

Question

我制作了一个恶作剧计算器，当按下“=”按钮时，它会接受用户输入的答案并显示出来。输入以 JavaScript 中的提示形式进行，通过长按“0”按钮触发。长按功能是通过在按下按钮时设置 2 秒超时（使用 onmousedown）并在抬起鼠标键时清除超时（onmouseup）来实现的。这在计算机上运行良好，但我不知道如何在移动设备上实现。我也尝试过 onpointerdown 和 onpointerup 事件。这些在电脑上也能正常工作，但是当我在移动设备上长按时，提示很快就会再次显示。与此相关的HTML和JavaScript代码如下：

HTML:

          <td>
            <button
              class="calculator-button"
              onclick="insert(0)"
              onmousedown="activateMagic()"
              onmouseup="disableMagic()"
            >
              0
            </button>
          </td>

JavaScript:

let answer = null;
const input = document.getElementById("calcInput");
let pressTimer;

const insert = (objToInsert) => {
  input.value += objToInsert;
};

const clearInput = () => {
  input.value = null;
  answer = null;
};

const activateMagic = () => {
  pressTimer = window.setTimeout(() => {
    answer = prompt("Enter the prank answer: ");
  }, 2000);
  return false;
};

const disableMagic = () => {
  clearTimeout(pressTimer);
};

const findAnswer = () => {
  if (answer == null) {
    let problemAnswer = eval(input.value);
    setTimeout(() => {
      input.value = problemAnswer;
    }, 10);
  }

  input.value = answer;
};

提前致谢。

Answer 1

我找到答案了！！ @DanyloHalaiko 是对的。 touchstart 和 touchend 事件侦听器 实际上 有效！对于那些感兴趣的人或将来看到这个的人，这是我的最终代码：

HTML:

          <td>
            <button
              class="calculator-button"
              onclick="insert(0)"
              onmousedown="activateMagic()"
              onmouseup="disableMagic()"
              id="activateBtn"
            >
              0
            </button>
          </td>

JavaScript:

let answer = null;
const input = document.getElementById("calcInput");
const activateBtn = document.getElementById("activateBtn");
let pressTimer;

const insert = (objToInsert) => {
  input.value += objToInsert;
};

const clearInput = () => {
  input.value = null;
  answer = null;
};

const activateMagic = () => {
  pressTimer = window.setTimeout(() => {
    answer = prompt("Enter the prank answer: ");
  }, 2000);
  return false;
};

const disableMagic = () => {
  clearTimeout(pressTimer);
};

activateBtn.addEventListener("touchstart", activateMagic);
activateBtn.addEventListener("touchend", disableMagic);

const findAnswer = () => {
  if (answer == null) {
    let problemAnswer = eval(input.value);
    setTimeout(() => {
      input.value = problemAnswer;
    }, 10);
  }

  input.value = answer;
};

HTML onmousedown 事件在移动设备上不起作用

HTML onmousedown event not working on mobile

html

javascript

mobile