Question

好的，我有以下HTML代码

<div id="absoluteWrapper"  style = "z-index:-11; pointer-events: none;">
    <div id="wrapper"  style = "z-index:-11; pointer-events: none;">
        <div id="leftWrap"  style = "z-index:-11; pointer-events: none;">
            <div id="miniWrapL"  style = "z-index:-11; pointer-events: none;">
                <div id="aboveMapPic"   style = "pointer-events: none;">
                    <img src="images/aboveMap.png" alt="" />
                </div>
                <div id="map"></div>
            </div>
        </div>



        <div id="rightWrap">

            <div id="miniWrapR">

            </div>

        </div>

    </div>
</div>

其中一个“最里面”的div，id为“map”的div拥有googles map API的地图，经过javascript和控制台的广泛测试，我发现我的“点击”事件无法到达它（因此我无法放大和缩小，这是一个问题）

我已将其所有（其中一些绝对定位）父项的z-index设置为荒谬的低值，我甚至尝试将指针事件设置为等于无...仍然无效。

请注意，当我从父母单击地图的“堆栈”中删除div时，拖动它并放大和缩小效果很好。

我在chrome和firefox中测试了这个。

帮助我Obi-One Kenobi ......等等。

但严重的是......你们对于造成这种情况的原因有什么建议或者我该如何解决？我可以在div上添加一个过分，但考虑到我需要点击实际div，因为它与google mpas API进行通信......这将是一件相当困难的事情。

Answer 1

逻辑是将指针事件休息到#map （不再有你的代码，可能是某些事情）

<div id="absoluteWrapper"  style = "z-index:-11; pointer-events: none;">
    <div id="wrapper"  style = "z-index:-11; pointer-events: none;">
        <div id="leftWrap"  style = "z-index:-11; pointer-events: none;">
            <div id="miniWrapL"  style = "z-index:-11; pointer-events: none;">
                <div id="aboveMapPic"   style = "pointer-events: none;">
                    <img src="images/aboveMap.png" alt="" />
                </div>
                <div id="map" style = "pointer-events: auto;"></div>
            </div>
        </div>



        <div id="rightWrap">

            <div id="miniWrapR">

            </div>

        </div>

    </div>
</div>

HTML无法通过鼠标到达元素/无法单击父div

1 个答案: