javascript - 忽略叠加 div

Question

我有一个叠加层，中间有一个孔，用作其下方图像的 mask 。我想用 draggable() 拖动图像。但是，我找不到可靠的方法来用我的鼠标忽略叠加层(这是一些 TR 的 TD 在中间使用 javascript 创建了一个可变掩码)。不过，我遇到了 pointer-events: none。而这正是我所需要的。不过，我也需要让它在 IE8 中工作。所以我需要一个对 X 浏览器更友好的解决方案。

感谢任何帮助。

<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。一定有一些解决方法可以让它忽略叠加层并使其下方的图像可调整大小和拖动，对吗？

Answer 1

我之前在 SO 上阅读过关于“指针事件”的模拟主题。

Pointer-events is a Mozilla hack and where it has been implemented in Webkit browsers, you can't expect to see it in IE browsers for another million years.

请检查这是否值得尝试:css 'pointer-events' property alternative for IE