Disabling pointer events for inspect element

1.8k Views Asked by At

I have a div for which pointer events is set to "none". I can click through to elements underneath fine, but if I right click an element and inspect it with Chrome, it gives me the div that's on top. Does anyone else have this issue? I don't remember it being an issue before.

2

There are 2 best solutions below

1
On BEST ANSWER

According to this https://code.google.com/p/chromium/issues/detail?id=136887 it is proper behaivor. What was before (when you can't inspect elements with "pointer-events:none") was a bug.

Chromium has tests for this fix: https://chromium.googlesource.com/chromium/blink.git/+/dfcf6a3782dcae5dd16baec94040b931b0791fa6/LayoutTests/inspector/elements/inspect-pointer-events-none.html

1
On

Per this Chromium issue comment, you can hold Shift while using Chrome's inspect element from devtools, which will highlight elements (with parent element in red) even when they have pointer-events: none on them.