useEffect(() => {
let eMouseLeave: EventListenerOrEventListenerObject,
eMouseEnter: EventListenerOrEventListenerObject,
eMouseMove: EventListenerOrEventListenerObject;
if (!window.matchMedia("(hover:hover)").matches) return;
const el = element.current;
if (!el) return;
el.addEventListener(
"mouseleave",
(eMouseLeave = (e) => {
if (!window.matchMedia("(hover:hover)").matches) return;
gsap.to(e.target, { duration: 0.5, scale: 1, x: 0, y: 0 });
gsap.to(circle.current, {
duration: 0.5,
scale: 1,
x: 0,
y: 0,
});
gsap.to(innerShape.current, {
duration: 0.5,
scale: 1,
x: 0,
y: 0,
});
})
);
el.addEventListener(
"mouseenter",
(eMouseEnter = (e) => {
gsap.to(e.target, { duration: 0.5, transformOrigin: "0 0", scale: 1 });
gsap.to(circle.current, {
duration: 0.5,
scale: 1.2,
});
})
);
el.addEventListener(
"mousemove",
(eMouseMove = (e) => callParallax(e))
);
return () => {
if (el) {
el.removeEventListener("mousemove", eMouseMove);
el.removeEventListener("mouseenter", eMouseEnter);
el.removeEventListener("mouseleave", eMouseLeave);
}
};
});```
```Argument of type 'Event' is not assignable to parameter of type 'MouseEvent'.
Type 'Event' is missing the following properties from type 'MouseEvent': altKey, button, buttons, clientX, and 21 more.```
#More TS help ;)
1 messages · Page 1 of 1 (latest)
"mousemove",
(eMouseMove = (e) => callParallax(e))
);``` The error is on this line at `e`
@versed meadow The callParallax function is probably expecting a React event, but you're pasing it a native one.
If you control the type of callParallax you can change it to either accept native events - or to be specific about what parts of event it actually uses, which would hopefully make it compatible with both.
The callParallax function is expecting a mouse event
which is what mousemove should send?
It seems to be erroring because of me assigning eMouseMove to it
eMouseMove: (e: MouseEvent) => void; this seems to fix it i think?
Is it the React version of MouseEvent though?
I'm not sure why the assignment would be causing the issue 🤔, maybe it's inferring e from the EventListenerOrEventListenerObject type that you annotated.
But you might simplify this and structure your code like:
const eMouseLeave = /* handler */
el.addEventListener("mouseleave", eMouseLeave);
//...
return () => {
el.removeEventListener("mouseleave", eMouseLeave);
// ...
};
This seems simpler than declaring the functions and assigning them as a side-effect.