如何访问底层元素上的事件？

Question

我有一个 div，其中包含一个带地图的 iframe 和另一个与地图重叠的 div。

HTML

<div class="locationFinder">
    <iframe width="100%" height="100%" frameborder="0" scrolling="no"
            marginheight="0" marginwidth="0"
            src="https://maps.google.com/?ie=UTF8&amp;t=m&amp;ll=37.449105,-122.16048&amp;spn=0.003918,0.009634&amp;z=16&amp;output=embed">
    </iframe>

    <div class="mapover">
        <p class="titleTextM">Want to learn more?</p>
    </div>
</div>

CSS

.locationFinder {
    position: relative;
    width: 100%;
    height: 425px;
    background-repeat: no-repeat;
}
.mapover {
    position: absolute;
    top: 0;
    width: 100%;
    height: 428px;
    background-repeat: no-repeat;
    background: black;
    opacity: .5;
}

第二个 div 在地图上。所以我无法对其执行任何操作。 所以我的要求是，用户仍然可以使用地图。有什么办法可以实现吗？

Answer 1

你在你的 mapover css 类中尝试过pointer-events: none; 吗？对于某些版本的 ie，这可能需要额外的 CSS。