How to allow clicks through element without preventing the mousemove event? | Sololearn: Learn to code for FREE!
New course! Every coder should learn Generative AI!
Try a free lesson
+ 1

How to allow clicks through element without preventing the mousemove event?

So, I am using a canvas which takes the whole screen with a fixed position, which is coded to create a nice cursor effect that follows the cursor. The problem is that, with the canvas infront of the page all the links and buttons behind the canvas can't be clicked now, I used pointer-events: none CSS property and I was then able to click elements behind the canvas, but the mousemove event was ignored too, so I added the mousemove event to the window, which worked, however, whenever I move my mouse over an iframe the mousemove event stops, and I don't want that. So, is there any way to allow clicks through the canvas without preventing mousemove event? Or is there anyway to make mousemove event work on iframes too? I tried pointer-events:none; on the iframes and it did work but then I couldn't scroll through the iframes or click stuff in them.

24th Feb 2021, 11:11 AM
Karak10
Karak10 - avatar
1 Answer
0
if you have something in front of another, you must take first one before accessing to second one... mouse/pointer behavior is almost the same: a mouse/pointer event once reached something, doesn't propagate under... if your iframe(s) hold no cors ressources, you could communicate between them and 'manually' propagate the event(s) from the iframe ;)
24th Feb 2021, 3:22 PM
visph
visph - avatar