的iFrame覆蓋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; 
    } 

爲什麼mousemove事件在Internet Explorer上的圖像上不會觸發？

Answer 1

可能與IE處理空元素上鼠標事件的方式有關。嘗試添加一個背景到你的覆蓋，以強制其渲染：

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

或者也許是舊版本的透明gif bg。

Answer 2

嘗試解決這裏提到：

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

顯然IE有關於iframe的層問題。你的腳本很好，如果你走到圖像的邊緣，它也可以工作，所以它顯然只是一個分層問題。

Asped