3

描述：

当您将鼠标悬停在透明叠加层中时，我需要访问 iframe 中的各个元素。这是一个在线 HTML 编辑软件。

它在 Chrome/Firefox 上运行良好，但在 Internet Explorer 上运行良好（我正在使用 IE10 进行测试）

我在这里重新创建了 jsfiddle 中的问题：demo

HTML：

<div id="frame-content">
    <iframe id="frame" style="width: 800px; background:transparent;" allowtransparency="true"></iframe>
    <div id="overlay"></div>
</div>

jQuery：

$(function () {
    var iframe = $("#frame")[0];
    var iframewindow = iframe.contentWindow ? iframe.contentWindow : iframe.contentDocument.defaultView;
    $(iframewindow.document).find("body").append("<img src='http://quickbase.intuit.com/blog/wp-content/uploads/2011/02/CampsBaySunset.jpg'/>");

    $("#overlay").mousemove(function (e) {
        console.log("x:" + (e.pageX) + ", y:" + (e.pageY));
    });
});

CSS：

   #frame-content {
       overflow: auto;
       position: relative;
       width: 100%;
       height: 600px;
       display: block;
       top: 43px;
   }
   #frame-content iframe {
       transition: 0.1s linear;
       -moz-transition: 0.1s linear;
       -webkit-transition: 0.1s linear;
       background-color: #fff;
       border: 0;
       z-index: 1;
       border-radius: 0px;
       -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.7);
       -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.7);
       -o-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.7);
       box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.7);
       position:relative;
       display: block;
       margin: 0 auto;
       margin-bottom:-5000px;
       height: 5000px;
   }
   #overlay {
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       min-height: 100%;
       z-index: 2;
       -webkit-touch-callout: none;
       -webkit-user-select: none;
       -khtml-user-select: none;
       -moz-user-select: none;
       -ms-user-select: none;
       user-select: none;
       height:5000px;
   }

为什么鼠标移动事件在 Internet Explorer 上的图像上没有触发？

4

2 回答 2

2

可能与 IE 处理空元素上的鼠标事件的方式有关。尝试向叠加层添加背景以强制其渲染：

#overlay {
     background-color:rgba(0,0,0,0);
}

或者可能是旧版本的透明 gif bg。

于 2013-08-06T23:32:37.880 回答
0

尝试这里提到的解决方案：

z-index 在 iframe 中带有 pdf 的 Internet Explorer 中不起作用

显然 IE 在 iframe 上的图层存在问题。你的脚本很好，如果你只是在图像的边缘后面也可以工作，所以这显然只是分层的问题。

加速

于 2013-08-03T17:40:19.277 回答