In Firefox wird das Elternelement nicht fokussiert, wenn auf Kind mit fester Position geklickt wird

Question

Ich habe ein festes Element in einem fokussierbaren Element. Wenn ich auf das fixierte Element klicke, sollte das übergeordnete fokussierbare Element den Fokus erhalten. Es funktioniert in Chrome, Edge und IE11, funktioniert aber nicht in Firefox.

.focusable { 
 
    background-color: red; 
 
    width: 200px; 
 
    height: 200px; 
 
} 
 

 
.focusable:focus { 
 
    background-color: blue; 
 
} 
 

 
.fixed { 
 
    top: 200px; 
 
    background-color: green; 
 
    position: fixed; 
 
    height: 100px; 
 
    width: 200px; 
 
}

<div class="focusable" tabindex="0"> 
 
<div class="fixed"> 
 
Parent will not get focus. 
 
</div> 
 
</div>

Haben Sie irgendwelche Abhilfen wissen? Ich würde vermeiden mousedown Ereignis behandeln und preventDefault() aufrufen.

Answer 1

weil Sie Position für das innere Kind-Element befestigt sind, mit

position:fixed zu entfernen und es wird gut