HTML elements pointer events pass through
1 min read

HTML elements pointer events pass through

There is a really neat trick I found to pass mouse clicks to the HTML elements below the blocking element.

I was working on capturing mouse clicks because user was drawing a poly-line and I used an SVG element that covered the canvas element to show user a preview of the poly-line that was being created.

Problem was that only first two points were collected and then the SVG element blocked mouse events as it was covering the drawing canvas. After some searching for a solution I found a neat CSS property that can be used to make element transparent for pointer events. So after I added pointer-events: none; to SVG's element my drawing code suddenly started working as expected.

Problem solved with 21 characters :)