Detectar clique direito no React-Exemplos de código

Radu TM
Victor Talmacinschi

Detectar clique direito no React

JavaScript por Victor Talmacinschi June 16, 2022

import React, { useState } from "react";

const RightClickDetector = () => {
  // useState para rastrear se o clique-direito foi detectado
  const [isRightClick, setIsRightClick] = useState(false);

  const handleContextMenu = (e) => {
    // impedir que o menu de contexto do navegador apareça
    e.preventDefault();
    // atualizar o estado para refletir que ocorreu um clique-direito
    setIsRightClick(true);
    // redefinir o estado após um breve atraso
    setTimeout(() => setIsRightClick(false), 250);
  };

  return (
    <div onContextMenu={handleContextMenu}>
      {isRightClick ? "Clique direito!" : "Clique esquerdo!"}
    </div>
  );
};

export default RightClickDetector;

0

24.139

Detectar clique direito no React

JavaScript por Radu TM June 16, 2022

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

const RightClickDetector = () => {
  // useState para rastrear cliques no botão direito
  const [isRightClick, setIsRightClick] = useState(false);

  // useEffect para adicionar / remover o ouvinte de eventos
  useEffect(() => {
    // adicionar ouvinte de evento na montagem
    document.addEventListener("contextmenu", handleRightClick);
    // remover ouvinte de evento na desmontagem
    return () => document.removeEventListener("contextmenu", handleRightClick);
  }, []); // matriz vazia garante que o efeito só seja executado na montagem e desmontagem

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

  return (
    <div>
      {isRightClick ? (
        <p>Você clicou com o botão direito!</p>
      ) : (
        <p>Tente clicar em qualquer lugar nesta página.</p>
      )}
    </div>
  );
};

export default RightClickDetector;

0

24.139

Consultas relacionadas com JavaScript

Últimas consultas JavaScript

Explorar exemplos de código por categorias