iFrame Overlay mousemove 事件在 Chrome 中有效，但在 Internet Explorer 中无效答案

【问题标题】：iFrame Overlay mousemove event works in Chrome but not Internet ExploreriFrame Overlay mousemove 事件在 Chrome 中有效，但在 Internet Explorer 中无效
【发布时间】：2013-08-07 07:32:37
【问题描述】：

说明：

当您将鼠标悬停在透明叠加层中时，我需要访问 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 上的图像上鼠标移动事件不触发？

【问题讨论】：

标签： jquery html css internet-explorer cross-browser

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

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

z-index does not work in Internet Explorer with pdf in iframe

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

加速

【讨论】：

感谢您的链接。肯定是这样的，你知道我会如何让它在我的例子中工作吗？正如该解决方案所述，我尝试添加第二个带有封面类的 iframe，但它似乎没有按预期工作。