Wie können Sie einen iframe haben Zeiger-Ereignisse: keine; aber nicht auf einer div in das?

Question

Ich habe einen iframe mit einem geerbten pointer-events: none;, aber wenn ich eine <div> in den Iframe mit einem pointer-events: auto; eingefügt haben reagiert das Div nicht auf Klicks oder Maus Hover-Ereignisse.

Der Grund dafür ist, dass die iframe in einem <div style="position:fixed;"> ist, so ist es ein bisschen wie ein kleines Menü. aber ich möchte, dass der Benutzer durch die iframe klicken, aber nicht über die Links und divs im iframe.

Und ja, es muss unbedingt ein Iframe bleiben.

Wie könnte ich das umgehen? Kann ich das sogar umgehen?

Hier ist ein einfaches Beispiel: jsfiddle.net/MarcGuiselin/yLo119sw/2

Answer 1

Sie mit position:absolute arbeiten, gemäß dem Beispiel, das Sie auf jsfiddle hochgeladen haben ... eine z-index auf die „Hinzufügen können Sie auf mich nicht, weil ich bin hinter dem iframe "-Button erlaubt es mir, darauf zu klicken.

Z-Index

EDIT: Wenn Sie eine pointer-events: none; überall, außer in einer div tun möchten, können Sie die pointer-events in jedem element anstelle des iframe hinzuzufügen. Nach Ihrem Beispiel in der Geige, wenn Sie das Nicholas Cage speichern möchten, aber die anderen Ereignisse blockieren, können Sie etwas tun:

switchbutton.onclick=function(){ 
    this.innerHTML="reload to reset"; 
    //iframe.style.pointerEvents="none"; 
    cantclick.innerHTML="You can click me now! :)"; 
    iframe.contentDocument.body.innerHTML="<button>You can't click me now because my parent iframe is click-through! :(</button><br>or save this gorgeous image of your favorite actor which may or may not be relavant to the problem.<br><img id='nicholasCage' src='http://media2.popsugar-assets.com/files/2014/01/06/008/n/1922283/131b4126c7b8738f_thumb_temp_image333458751389045360.jpg.xxxlarge/i/Best-Nicolas-Cage-Memes.jpg'/>"; 

    var iframeBody = iframe.contentDocument, 
     elements = iframeBody.querySelectorAll("*"), 
     i, 
     len = elements.length; 

    for(i=0;i<len;i++){ 
     elements[i].style.pointerEvents="none"; 
    } 

    iframeBody.getElementById("nicholasCage").style.pointerEvents="all"; 
} 

Wenn Sie jQuery verwenden, können Sie es schneller mit nur tun können $("iframe *").css("pointer-events","none");

Answer 2

Haben Sie das versucht?

pointer-events: inherit; 

Ich weiß, dass Sie bereits Ihre Antwort erhalten haben, aber ich dachte, das könnte auch funktionieren.

Answer 3

Geben Sie nicht den ganzen iframe pointer-events: none. Nur innerhalb der iframe setzen Sie eine CSS-Regel body * { pointer-events: none;}

Auf diese Weise blockiert der Iframe keine Ereignisse, aber Elemente innerhalb des Iframe sind nicht anklickbar.