Detecteer rechtermuisklik in React-Codevoorbeelden

Radu TM

Detecteer rechtermuisklik in React

JavaScript door Radu TM June 16, 2022

import React, { useState, useEffect } from "react";

const RightClickDetector = () => {
  // Gebruik useState om rechtsklikken bij te houden
  const [isRightClick, setIsRightClick] = useState(false);

  // Gebruik useEffect om een ​​/ eventlistener toe te voegen of te verwijderen
  useEffect(() => {
    // Voeg een eventlistener toe bij het opstarten
    document.addEventListener("contextmenu", handleRightClick);
    // Verwijder de eventlistener tijdens het afsluiten
    return () => document.removeEventListener("contextmenu", handleRightClick);
  }, []); // Lege array zorgt ervoor dat het effect alleen wordt uitgevoerd bij opstarten en afsluiten

  const handleRightClick = (e) => {
    e.preventDefault();
    setIsRightClick(true);
  };

  return (
    <div>
      {isRightClick ? (
        <p>Je hebt rechts geklikt!</p>
      ) : (
        <p>Probeer overal op deze pagina rechts te klikken.</p>
      )}
    </div>
  );
};

export default RightClickDetector;

0

19.067

Gerelateerde JavaScript-zoekopdrachten

Laatste JavaScript-zoekopdrachten

Verkennen codevoorbeelden per categorie