Javascript 如何使指针事件在IE中工作？

我的图像在前面，文本在后面。我想选择后面的文字。 这适用于chrome和firefox。我如何使它也在IE中工作

<div id="parent-street-view">
    <div id="map_canvas">This is supposed to be visible and selectable</div>
    <img class="overlay-pollution"
    src="http://www.lorempixel.com/400/400" />
</div>​

<style>
@media print {
    .gmnoprint {
        display: none;
    }
}

@media screen {
    .gmnoscreen {
        display: none;
    }
}

#parent-street-view {
    position: relative;
}

#map_canvas {
    position: absolute !important;
    width: 500px;
    height: 400px;
    background-color: rgb(229, 227, 223);
    overflow: hidden;
    -webkit-transform: translateZ(0);
    z-index: 0;
}

#parent-street-view .overlay-pollution {
    width: 500px;
    height: 400px;
    position: absolute;
    z-index: 100;
    opacity: 0.5;
    pointer-events:none;
}​
</style>

---

如何在IE中实现这一点？

1-地图画布的z索引值为0，图像的z索引值为100，问题是图像实际上位于文本上方，因此IE不允许选择文本，要解决这个问题，请为map_canvas提供更高的值，比如说givemap_canvas-z-index:101。这将解决第一个问题

2-当您为map_canvas指定更高的值时，map_canvas的背景色将填充块，并且图像不会出现，因此只需为map_canvas背景色指定不透明度-背景色：rgb229、227、223、0.5

---

希望这能解决IE问题。

这有什么错？[Here][1]和[Here][2]是在IE[1]：[2]中使用指针事件的替代变量：