HTML onmousedown event not working on mobile

Question

I have made a prank calculator which takes an input from the user of the answer to be displayed when the '=' button is pressed. The input is taken in the form of a prompt in JavaScript which is triggered by long-pressing the '0' button. The long press feature is implemented by setting a timeout of 2 seconds when the buttons is pressed (using onmousedown) and clearing the timeout when the mouse key is lifted (onmouseup). This works fine on computers, but I don't know how to implement this on mobile. I have tried the onpointerdown and onpointerup events too. These also work fine on computers, but when I long-press on mobile, the prompt displays a second time shortly afterwards. The HTML and JavaScript code relating to this is as follows:

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

Thanks in advance.

Does this answer your question? [How to implement a onmousedown and onmouseup on a touch screen iphone](https://stackoverflow.com/questions/21009821/how-to-implement-a-onmousedown-and-onmouseup-on-a-touch-screen-iphone) — Danylo Halaiko, May 27 '21 at 12:48

score 0 · Accepted Answer · answered May 27 '21 at 15:36

I found an answer!! @DanyloHalaiko was right. The touchstart and touchend event listeners actually work! To those of you interested or those of you seeing this in the future, this is my final code:

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 event not working on mobile

1 Answers1