Estoy desarrollando una aplicación pwa react. cuando presiono prolongadamente, haga clic en una imagen, se comporta como si hiciera clic con el botón derecho. quiero deshabilitar este comportamiento solo en modo independiente. Sé que puedo usar
window.addEventListener('contextMenu',(e)=>e.preventDefault())pero este oyente se aplica en toda la ventana. usar ref puede no ser un buen enfoque porque quiero que el usuario pueda hacer clic derecho en el modo de escritorio.
Simplemente puede configurar oncontextmenu="return false;" en cualquier elemento que desee.
Consulte este enlace: https://codinhood.com/nano/dom/disable-context-menu-right-click-javascript
Prueba esto
Puede escribir un enlace personalizado para obtener el tamaño de la ventana
import { useState, useEffect } from "react"; const useWindowSize = () => { const [windowSize, setWindowSize] = useState({ width: undefined, height: undefined }); useEffect(() => { if (typeof window !== "undefined") { function handleResize() { setWindowSize({ width: window.innerWidth, height: window.innerHeight }); } window.addEventListener("resize", handleResize); handleResize(); return () => window.removeEventListener("resize", handleResize); } }, []); return windowSize; }; export default useWindowSize;Luego, escriba otro enlace personalizado según el tamaño de la ventana (ancho), puede registrar el detector de eventos para evitar el menú contextual
import { useState, useEffect } from "react"; import useWindowSize from "./useWindowSize"; function avoidContextMenu(e) { e.preventDefault(); } const useAvoidContextMenu = (ref) => { const windowSize = useWindowSize(); const [listenerStatus, setListenerStatus] = useState(false); useEffect(() => { if (!listenerStatus && windowSize.width < 600) { setListenerStatus(true); ref.current.addEventListener("contextmenu", avoidContextMenu); } else if (listenerStatus && windowSize.width >= 600) { setListenerStatus(false); ref.current.removeEventListener("contextmenu", avoidContextMenu); } }, [windowSize.width]); useEffect(() => { return ref.current.removeEventListener("contextmenu", avoidContextMenu); }, []); }; export default useAvoidContextMenu; En su componente, llame a useAvoidContextMenu dando una referencia para ese componente. De esta manera es configurable y reutilizable.
import { createRef } from "react"; import useAvoidContextMenu from "./useAvoidContextMenu"; export default function App() { const myRef = createRef(); useAvoidContextMenu(myRef); return ( <div style={{ backgroundColor: "lightblue" }}> <div className="App" ref={myRef}> <h1>Right click on me and check in different window widths</h1> <h3>(less than 600px and greater than 600px)</h3> </div> </div> ); }Caja de arena de código => https://codesandbox.io/s/inspiring-hellman-fomfw?file=/src/App.js