忽略覆蓋div

我有一箇中間有一個洞的覆蓋層，可以作爲其下面的圖像的掩膜。我想用draggable（）拖動圖像。然而，我找不到用鼠標忽略覆蓋層的可靠方法（這是TR的TD用javascript創建了一箇中間可變掩膜）。儘管我遇到了pointer-events: none。這正是我需要的。我也需要讓它在IE8中工作。所以我需要更多的X瀏覽器友好的解決方案。忽略覆蓋div

任何幫助表示讚賞。

<div class="workspace"> 
    <!-- <div id="color_overlay"></div> --> 
    <table border="0" cellpadding="0" cellspacing="0" class="overlay"> 
     <tr> 
      <td colspan="3">&nbsp;</td> 
     </tr> 
     <tr id="drawbox_tr"> 
      <td class="drawbox_side"></td> 
      <td id="drawbox">&nbsp;x</td> 
      <td class="drawbox_side"></td> 
     </tr> 
     <tr> 
      <td colspan="3">&nbsp;</td> 
     </tr> 
    </table> 
    <div id="image"></div> 
</div>

和CSS：

.container .workspace { 
    float: left; 
    width: 75%; 
    height: 100%; 
    overflow: hidden; 
    background: pink; 
    position: relative; 
} 

.workspace .overlay { 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    z-index: 2; 
    margin: 0px; 
    padding: 0px; 
    cursor: pointer; 
} 

.workspace .overlay td, .workspace .overlay tr { 
    margin: 0px; 
    padding: 0px; 
} 

.workspace .overlay td { 
    opacity: 0.5; 
} 

.workspace #image { 
    position: absolute; 
    z-index: 1; 
    border: 1px solid #000; 
}

編輯：我所做的指針事件（http://www.envyum.nl/pointer/）的一個小的演示。在Chrome中，例如，通過製作pointer-event: none，它就像魅力一樣。在IE8中沒有任何反應。但我仍然需要IE8。必須有一些解決方法，使其忽略覆蓋，並使其下面的圖像可調整大小和拖動，對不對？

來源

2013-03-05 CaptainCarl

會很高興地看到此代碼的運行。 http://jsfiddle.net/或類似的東西，以顯示代碼工作將不勝感激。 – 2013-03-05 09:01:50

對已故的評論抱歉。請參閱我的編輯。 – CaptainCarl 2013-03-06 10:28:22