Catch quadruple click in js

user_17876739 0
Viewed 69

I am developing an React app in which i have to implement t9 typing in which we have to simulate the typing of keypad phones

(ie . say if i click the button containing 'p q r s'
on:
long press : shows 7
single click: shows p
double click shows q
triple click shows r
quadruple click : should show 's' but my code shows 'rp'

What i have done i have set an onclick listener to td of html table (which i am using to render as key of key pad phone) and find no. Of times it has been clicked by event.detail . in some case i need to capture a quadruple click (eg. if i have to type 's') but when i click an element more than 3 it resets event.detail to 1 and start again.here hows the ui looks like

Code of onclick listener:

<tbody>
          {array.map((i) => {
            return (
              <tr key={i}>
                {values.slice(3 * i, 3 * i + 3).map((val) => {
                  return (
                    <td
                      key={val.str1}
                      onClick={fxn}
                      className={val.str2}
                      id={val.str1}
                      onMouseDown={startTimer}
                      onMouseUp={clear}
                      onMouseLeave={clear}
                    >
                      <h2>{val.str1}</h2>
                      {val.str1 !== val.str2 && <h5>{val.str2}</h5>}
                    </td>
                  );
                })}
              </tr>
            );
          })}
        </tbody>

Code of fxn:

const fxn = (event) => {
    var string = event.currentTarget.className;
    var s2 = event.currentTarget.id;
    var times = event.detail;
    if (count === display.length) {
      if (s2 === string || s2 === "0") {
        setDisplay(display + string);
      } else {
        if (times < 2) {
          setDisplay(display + string[(times - 1) * 2]);
        } else {
          setDisplay(display.slice(0, -1) + string[(times - 1) * 2]);
        }
      }
    }
  };

Here is the full code in case you need to see:
https://codesandbox.io/s/winter-leaf-4k62s
Is there any method to capture the quadruple click?

reactjs event-handling javascript
1 Answers

The main problem was that when there are more than 3-4 clicks, string[(times-1)*2] returned undefined.

What I did:

  • Got rid of the timeout and all related functions because we know that it was a multiple click by analyzing event.detail number.
  • Added <pre> in the display so consecutive white spaces would not be squashed.
  • Specified key as val.str1 in <td> as it was always giving [object Object] console error.
import { useState } from "react";
import "./styles.css";

const values = [
  { str1: "1", str2: ". , !" }, { str1: "2", str2: "a b c" }, { str1: "3", str2: "d e f" },
  { str1: "4", str2: "g h i" }, { str1: "5", str2: "j k l" }, { str1: "6", str2: "m n o" },
  { str1: "7", str2: "p q r s" }, { str1: "8", str2: "t u v" }, { str1: "9", str2: "w x y z" },
  { str1: "*", str2: "*" }, { str1: "0", str2: " " }, { str1: "#", str2: "#" }
];
const rows = [0, 1, 2, 3];

let clickStart = 0;

export default function App() {
  const [display, setDisplay] = useState("");

  const fxn = (event) => {
    const duration = new Date() - clickStart;
    console.log(duration);
    const string = event.currentTarget.className;
    const name = event.currentTarget.id;

    if (isNaN(name) || name === "0") {
      setDisplay(display + string);
      return;
    }

    const values = string.split(" ");
    const times = event.detail;
    const char = values[(times - 1)% values.length];
    setDisplay((times === 1 ? display : display.slice(0, -1)) + char);
  };

  return (
    <div className="App">
      <h1>Glamplus Internship Puzzle</h1>
      <h2>--made by Prince Yadav</h2>
      <table>
        <thead>
          <tr>
            <th colSpan={3}>
              <pre>{display}</pre>
            </th>
          </tr>
        </thead>
        <tbody>
          {rows.map((i) => {
            return (
              <tr key={i}>
                {values.slice(3 * i, 3 * i + 3).map((val) => {
                  return (
                    <td
                      key={val.str1}
                      onMouseDown={() => (clickStart = new Date())}
                      onMouseUp={fxn}
                      className={val.str2}
                      id={val.str1}
                    >
                      <h2>{val.str1}</h2>
                      {val.str1 !== val.str2 && <h5>{val.str2}</h5>}
                    </td>
                  );
                })}
              </tr>
            );
          })}
        </tbody>
        <tfoot></tfoot>
      </table>
    </div>
  );
}
user_48736160
Related