如何使iframe具有指针事件：none;但不是在里面的div？ [英] How can you make an iframe have pointer-events: none; but not on a div inside that?

问题描述

我有一个iframe与继承的 pointer-events：none; 但是当我插入一个< div> 在iframe中使用 pointer-events：auto; ，div不会对点击或鼠标悬停事件作出反应。

$ b这是因为 iframe 在< div style =position：fixed;>
所以它是一种像一个小菜单。但我希望用户点击 iframe ，而不是通过iframe中的链接和div。

是的，它绝对需要保留iframe。

如何绕过这个？

这里有一个简单的例子： jsfiddle.net/MarcGuiselin/yLo119sw/2

解决方案

您正在使用位置：绝对，根据您在jsfiddle上传的示例...添加 z-index 到您不能点击

Z-Index

编辑：如果你想做一个 pointer-events：none; 除了在 div 中的所有地方，你可以添加 pointer-events 在每个元素中，而不是 iframe 。根据你的例子在小提琴，如果你想保存尼古拉斯笼，但阻止其他事件，你可以这样做：

  switchbutton.onclick = function（）{
 this.innerHTML =reload to reset; 
 //iframe.style.pointerEvents=\"none; 
 cantclick.innerHTML =你可以点击我吧！ 
 iframe.contentDocument.body.innerHTML =< button>现在无法点击我，因为我的父级iframe是点击！：（< / button>< br>你最喜欢的演员，这可能是也可能不是相关的问题。< 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; 
} 
 

如果你可以使用jQuery，你可以使用 $（iframe *） .css（pointer-events，none）;

I have an iframe with an inherited pointer-events: none; but when I have inserted a <div> inside the iframe with a pointer-events: auto; the div won't react to clicks or any mouse hover events.

The reason for this is that the iframe is inside a <div style="position:fixed;"> so it is kind of like a little menu. but I would like the user to click through the iframe, but not through the links and divs in the iframe.

And yes, it absolutely needs to remain an iframe.

How could I bypass this? Can I even bypass this?

Here's a simple example: jsfiddle.net/MarcGuiselin/yLo119sw/2

解决方案

You're working with position:absolute, according to the example you've uploaded on jsfiddle... Adding a z-index to the "you can't click me because i'm behind the iframe" button allows me to click it.

Z-Index

EDIT: If you want to do a pointer-events: none; everywhere except in one div, you can add the pointer-events in each element instead of the iframe. According to your example in the fiddle, if you want to save the Nicholas Cage but block the other events, you can do something like this:

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";
}

If you can use jQuery you can do it faster just using $("iframe *").css("pointer-events","none");

这篇关于如何使iframe具有指针事件：none;但不是在里面的div？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！