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>
);
}
Can someone explain me what is the roll of {passive:false} in this code or{passive:true} in the code
According to MDN, setting the option passive: false tells the browser that the handler might call .preventDefault() to cancel the default action for the event.
It also says that in general passive: false is the default, but some browsers make passive: true to be the default for certain events, including 'wheel' events, so setting it to false is necessary for being consistent across all browsers.
As for setting passive: true when calling .removeEventListener() - I don't see a reason. By what I understand from MDN, it is supposed to be ignored completely, though on some browser releases it might prevent the removal of the handler when it doesn't match the original options in the call to .addEventListener().