Question

我有一个中间有一个孔的覆盖层，用作下面图像的掩模。我想用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是一个Mozilla hack，它已经在Webkit浏览器中实现，你不能指望在IE浏览器中看到它已经有一百万年了。

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

忽略叠加div

1 个答案: