Firefoxでは、固定位置の子をクリックしたときに親要素がフォーカスを取得しません。

Question

フォーカス可能な要素の中に固定要素があります。固定要素をクリックすると、親フォーカス可能要素にフォーカスが当てられます。 Chrome、Edge、IE11で動作しますが、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>

あなたは回避策について知っていますか？私はmousedownイベントの処理とpreventDefault（）の呼び出しを避けたいと思います。

Answer 1

あなたがposition:fixedを取り除く内側の子要素

のための固定位置を使用していて、それはもちろん、細かい