iFrame Overlay mousemove事件適用於Chrome但不適用於Internet Explorer

Question

描述：

當您將鼠標懸停在透明疊加層中時，我需要訪問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上覆蓋圖像時不會觸發mousemove事件？

Answer 1

可能與IE處理空元素上的鼠標事件的方式有關。 嘗試在疊加層中添加背景以強制渲染：

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

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

Answer 2

嘗試這里提到的解決方案：

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

顯然IE在iframe上有圖層問題。 你的腳本很好，如果你只是在圖像的邊緣后面也可以工作，所以它顯然只是分層的問題。

Asped