问题
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.
回答1:
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.
来源：https://stackoverflow.com/questions/23499688/iframe-with-pointer-events-none-but-with-a-div-inside-it-that-has-pointer-even