import { useEffect } from "react"; import "./styles.css"; export default function App() { useEffect(() => { const handleWheel = (e) => { if (e.ctrlKey || e.metaKey) e.preventDefault(); console.log(e); }; window.addEventListener("wheel", handleWheel, { passive: false }); return () => { window.removeEventListener("wheel", handleWheel, { passive: true }); }; }, []); return ( <div className="App"> <div className="hover">Hover me </div> </div> ); }¿Alguien puede explicarme cuál es el rol de {pasivo: falso} en este código o {pasivo: verdadero} en el código?
De acuerdo con MDN , establecer la opción passive: false le dice al navegador que el controlador podría llamar a .preventDefault() para cancelar la acción predeterminada para el evento.
También dice que, en general, passive: false es el predeterminado, pero algunos navegadores hacen que passive: true sea el predeterminado para ciertos eventos, incluidos los eventos de 'wheel' , por lo que es necesario configurarlo en false para que sea consistente en todos los navegadores.
En cuanto a establecer passive: true al llamar a .removeEventListener() - No veo una razón. Por lo que entiendo de MDN , se supone que debe ignorarse por completo, aunque en algunas versiones del navegador puede evitar la eliminación del controlador cuando no coincide con las opciones originales en la llamada a .addEventListener() .