有人可以解釋爲什麼這在IE瀏覽器中工作？

Question

我有一個裁剪插件，可以在拖動圖像時平移圖像。我想在上面塗上一個面具png，給人一種切割形狀的印象。 here is the jsfiddle

它在圖像遮罩div上使用css3屬性pointer-events:none;，它可以在webkit瀏覽器（如chrome和firefox）中使用。但它在IE中不起作用，因爲pointer-events: none;僅適用於SVG。

我做了很多關於如何通過div傳遞指針事件的研究。我嘗試了一些解決方案，但他們頭疼，有的沒有工作：

so question

forward mouse events through layers

尋找更多到插件我用我能夠擴展它，並把它之後在IE瀏覽器（僅測試8和9）和其他瀏覽器中工作，而不使用pointer-events選項。 Here is the jsfiddle of the new version。 但我真的不知道它爲什麼工作？我基本上做了三件事。

1. 傳遞面具SRC作爲一個選項

2. 添加一個檢查，看是否提供屏蔽選項，如果是裝載功能：

   if (this.options.mask_src) { 
       var masksrc = this.options.mask_src; 
       this.createMask(masksrc); 
   } 
   

3. 具備的功能追加一個div用掩模圖像作爲背景圖像的文檔的div：

   createMask: function(m_src) { 
   
       $('<div class="iviewer_image_mask" style="background: url('+ m_src +');"></div>').appendTo(this.container); 
   }, 
   

任何人都可以向我解釋爲什麼這種解決方案適用於圖像平移，其掩模層超標？這就像它只是將鼠標事件應用於圖像，並忽略遮罩層。

Answer 1

這似乎是由於兩個div元素的位置。在你不工作的版本，這是HTML結構（簡體）：

<div class="wrapper"> 
    <div id="viewer2" class="viewer"> 
     <img /> 
    </div> 
    <div class="image-mask"></div> 
</div> 

在您運行的版本，你插入的元素，這是它結束了：

<div class="wrapper"> 
    <div class="viewer iviewer_cursor" id="viewer2" > 
     <img /> 
     <div class="iviewer_image_mask"></div> 
    </div> 
</div> 

而到將掩碼移入原始文件中的viewer div，我可以使其工作in this fiddle。

我相信這會有所不同，因爲你的腳本綁定到viewer2股利，所以擁有裏面的面具，顯然允許它在你的腳本的上下文中運作，而在外面卻沒有。