HTML畫布的使用在IE9中，用z-index屬性

Question

注意：這個問題是不是被所有網站上所引用的通常的z-index錯誤。 顯示器正確考慮了z-index屬性。

嗨，

我爲網站設計了一個基於JavaScript的繪圖界面。 它在現有頁面的頂部生成一個透明畫布，並允許用鼠標指針捕捉信息。

所以我的javascript代碼中動態我創建這個帆布和高的z-index將其聯繫起來，把它放到最前沿。

我的解決方案已經工作在非互聯網資源管理器中的Web瀏覽器。 Internet Explorer 9的beta版本現在支持畫布，所以我更新了我的代碼以便與IE9兼容。

現在我的問題是： 在IE9上，透明畫布正確顯示在頁面頂部，我可以在上面繪製它。 但當上的其他HTML元素的頂部我的鼠標指針移動，那麼它的變化和鼠標事件在畫布上沒有更多的拍攝。 例如上的文本字段的頂部移動時，從「默認」指針鼠標光標改變爲「文本」指針並點擊時，我選擇的文本的替代圖。

我試圖不透明度設置爲1的情況下，這是一個不透明的bug，但即使文本字段是不可見的，但它仍然點擊。

有沒有人已經面臨過這樣的問題嗎？ 我想這是使用某產品;-)

由於測試版的缺陷。 皮埃爾

Answer 1

我終於可以解決我的問題。 這不是IE9問題，而是全局Internet Explorer問題。

的解釋是，畫布是windoless元素，而我的文字元素窗。 要禁用窗口元件，我不得不對其它元件的頂部插入的iframe層，爲0的不透明度和我的畫布的大小相同的。

iframe的可動態創建這種方式：

this.iframe = document.createElement('iframe'); 
this.iframe.frameBorder=0; 
this.iframe.style.display='block'; 
this.iframe.style.position='absolute'; 
this.iframe.style.left = '0px'; 
this.iframe.style.top = '0px'; 
this.iframe.style.zIndex = 1000; 
this.iframe.style.opacity = 0; 
this.container.appendChild(this.iframe); 

由於它是一個窗口和windoless元件時，可以優先於文本和圖像元素。

我希望這會有所幫助。 皮埃爾