Rechtsklick in React erkennen-Code Beispiele

Victor Talmacinschi

Rechtsklick in React erkennen

JavaScript von Victor Talmacinschi June 16, 2022

import React, { useState } from "react";

const RightClickDetector = () => {
  // Verwenden Sie useState, um festzustellen, ob ein Rechtsklick erkannt wurde
  const [isRightClick, setIsRightClick] = useState(false);

  const handleContextMenu = (e) => {
    // Verhindern Sie das Erscheinen des Standard-Browser-Kontextmenüs
    e.preventDefault();
    // Aktualisieren Sie den Status, um anzuzeigen, dass ein Rechtsklick aufgetreten ist
    setIsRightClick(true);
    // Setzen Sie den Status nach einer kurzen Verzögerung zurück
    setTimeout(() => setIsRightClick(false), 250);
  };

  return (
    <div onContextMenu={handleContextMenu}>
      {isRightClick ? "Rechtsklick!" : "Linksklick!"}
    </div>
  );
};

export default RightClickDetector;

0

19.447

Rechtsklick in React erkennen

JavaScript von Victor Talmacinschi June 16, 2022

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

const RightClickDetector = () => {
  // Verwenden Sie useState, um Klicks auf die rechte Maustaste zu verfolgen
  const [isRightClick, setIsRightClick] = useState(false);

  // Verwenden Sie useEffect, um Ereignisbehandlungen hinzuzufügen / zu entfernen
  useEffect(() => {
    // Fügen Sie beim Einhängen einen Ereignisbehandlung hinzu
    document.addEventListener("contextmenu", handleRightClick);
    // Entfernen Sie beim Aushängen den Ereignisbehandlung
    return () => document.removeEventListener("contextmenu", handleRightClick);
  }, []); // Leere Array stellt sicher, dass der Effekt nur beim Einhängen und Aushängen ausgeführt wird

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

  return (
    <div>
      {isRightClick ? (
        <p>Sie haben mit der rechten Maustaste geklickt!</p>
      ) : (
        <p>Versuchen Sie, irgendwo auf dieser Seite mit der rechten Maustaste zu klicken.</p>
      )}
    </div>
  );
};

export default RightClickDetector;

0

19.447

Ähnliche JavaScript-Abfragen

Letzte JavaScript Abfragen

Code Beispiele nach Kategorien durchstöbern