HTML nicht erreichen kann Element mit Maus/kann nicht durch divs Eltern klicken

Question

Ok, ich habe hier den folgenden HTML-Code

<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> 

Einer der „innersten“ divs, die man mit der ID " Karte "beherbergt eine Karte von Google Maps API und nach ausgiebigen Tests mit Javascript und der Konsole habe ich realisiert, dass meine" Klick "-Ereignisse es nicht erreichen (und somit kann ich nicht hinein- und hinauszoomen, was ein Problem ist)

Ich habe den Z-Index aller seiner (einige von ihnen absolut positioniert) Eltern auf absurd niedrige Werte gesetzt und ich habe sogar versucht, Zeiger-Ereignisse auf sie gleich keine einzustellen ... immer noch nicht funktioniert.

Beachten Sie, dass, wenn ich das div von diesem "Stapel" von Eltern, die auf die Karte klicken, zieh es ziehen und hinein- und herauszoomen funktioniert gut.

Ich habe dies sowohl in Chrom und Firefox getestet.

Helfen Sie mir Obi-One Kenobi ... etc

Aber im Ernst ... Sie haben Jungs irgendwelche Vorschläge, was ist der Grund dafür, oder wie kann ich es beheben? Ich könnte ein overly über das div hinzufügen, aber in Anbetracht der Tatsache, dass ich auf die tatsächliche div klicken muss, da es mit der Google Mpas API kommuniziert ... das wäre eine ziemlich harte Sache zu tun.

Answer 1

die Logik wäre Zeiger-Ereignisse zur Ruhe #map (ohne mehr Code von Ihnen, könnte somethingelse sein)

<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>