忽略覆盖 div答案

【问题标题】：Ignore overlay div忽略覆盖 div
【发布时间】：2013-03-06 18:28:11
【问题描述】：

我有一个中间有一个洞的覆盖层，用作它下面的图像的蒙版。我想用 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。必须有一些解决方法使它忽略覆盖并使其下方的图像可调整大小和可拖动，对吧？

【问题讨论】：

很高兴看到这段代码在运行。 jsfiddle.net 或类似的东西来显示代码工作将不胜感激。
对不起，迟到的评论。请查看我的编辑。

标签： javascript html css

【解决方案1】：

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

Pointer-events 是 Mozilla hack，它已在 Webkit 浏览器中实现，你不能指望再过一百万年在 IE 浏览器中看到它。

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

【讨论】：

不幸的是在演示中使用了点击。然而，我需要一个可拖动和调整大小的。