Menu
It is possible to have an outer div with pointer-events: none; and another div inside it with pointer-events: auto;. The outer div will be transparent to click events (ie it won't react to click events but underlying html controls will) and the inner one will.
However, I now have a scenario where I need to do the same thing with an iframe, but it is not working. I set pointer-events: none; on the iframe, but then the inner divs that should be clickable are not even if they have pointer-events: auto; set.
There is another similar question here, but is has been closed for being off-topic. I don't understand why. It is a very valid html/css question.
292
Pointer events are DOM events that are fired for a pointing device. They are designed to create a single DOM event model to handle pointing input devices such as a mouse, pen/stylus or touch (such as one or more fingers). The pointer is a hardware-agnostic device that can target a specific set of screen coordinates.
In addition to indicating that the element is not the target of pointer events, the value none instructs the pointer event to go "through" the element and target whatever is "underneath" that element instead.
CSS pointer-events (for HTML) is Fully Supported on Safari 12, which means that any user who'd be accessing your page through Safari 12 can see it perfectly.
iFrames are treated as a single piece of content and not part of the page in which the iFrame resides, so, no, it is not possible.
The renderer and DOM are treating the iFrame as a black box. This is exactly why you cannot, for example, run regular methods like iFrameElement.childNodes[0] and similar (and get the <html> of the iFrame). You have to run iFrameElement.contentWindow.document.documentElement or something like that. It is a completely separate browsing context.
112
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
