html – 你如何使iframe有指针事件:无;但不是在里面的div?

前端之家收集整理的这篇文章主要介绍了html – 你如何使iframe有指针事件:无;但不是在里面的div?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个带有继承的指针事件的iframe:none;但是当我插入< div>在iframe里面有一个指针事件:auto; div不会对点击或任何鼠标悬停事件做出反应.

这样做的原因是iframe在< div style =“position:fixed;”>
所以有点像一个菜单.但是我希望用户点击iframe,而不是通过iframe中的链接和div.

是的,它绝对需要保留一个iframe.

我怎么能绕过这个?我甚至可以绕过这个吗?

这是一个简单的例子:jsfiddle.net/MarcGuiselin/yLo119sw/2

解决方法

您正在使用position:absolute,根据您在jsfiddle上传的示例…添加z-index到“您不能点击我,因为我在iframe后面”按钮允许我点击它.

Z-Index

编辑:如果你想做一个指针事件:none;除了一个div之外,你可以在每个元素中添加指针事件,而不是iframe.根据你在小提琴中的例子,如果你想保存尼古拉斯凯奇但是阻止其他的事件,你可以这样做:

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

如果你可以使用jQuery,你可以使用$(“iframe *”)来更快地执行它,css(“pointer-events”,“none”);

原文链接:https://www.f2er.com/html/230835.html

猜你在找的HTML相关文章